Home

About Us

mapsnigeriainitiative is a non-profit initiative established with the aim of sharing technical information and experience in the area of geospatial data gathering, processing, storage, interpretation and dissemination with the general public.

Register and get free access to GIS tutorials and webinars on various topics in Desktop GIS, Web GIS, Web Cartography and Web mapping applications.

Contact Email: admin@mapsnigeriainitiative.com Live Chat: 3-5pm Saturdays (mapsnigeriainitiative.com)

Upcoming activities

Adding markers(point features)

Column

Adding markers

Leaflet uses the L.marker function to draw markers onto leaflet maps.

L.marker([lat, lng]);

You can also use circular markers and style them

Example: L.circlemarker([6.00, 8.30],{fillColor:'red', color:'black', fillOpacity:0.6}).addTo(map);

Adding popup display to the marker using .bindPopup function

Example:L.marker([10.00, 7.30].bindPopup('marker').addTo(map);

Insert the objects into the script section of the source code just after the L.tileLayer code line.

<script>
var map = L.map('map').setView([9.00, 7.40] 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(map);
var marker = L.marker([10.00, 7.30]
.bindPopup('marker')
.addTo(map);
var circlemarker = L.circlemarker([9.00, 6.58]
,{fillColor:'red', color:'black', fillOpacity:0.6})
.addTo(map);
</script>

Adding line features

Column

Adding line features

Leaflet uses the L.polyline function to draw lines onto leaflet maps

L.polyline([[lat,lng],[lat, lng]]);

You can also use CSS to style them and use .bindPopup to add popup display

Example L.polyline([[6.529,3.346],[7.043,3.111],[7.548,3.887],[8.721,4.482],[8.847,7.116]]) .bindPopup("my first line") .addTo(map); Insert the objects and functions into the script section of the source code just after the L.tileLayer code line.

<script>
var map = L.map('map').setView([9.00, 7.40] 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(map);
var line = L.polyline([[9.722,5.321],[10.498,7.567],[10.922,7.459]], 
{color: "#813",weight: 5, dashArray: '7'})
.bindPopup("my first line")
.addTo(map);
</script>

Adding polygon features

Column

Adding polygon features

Leaflet uses the L.polgon function to draw polygons onto leaflet maps. This is very similar to the polylines.

L.polygon([[lat,lng],[lat, lng]],[[lat,lng],[[lat,lng]);

Example
L.polygon([[11.55, 25.36],[6.53, 25.08],[2.30, 28.32],[1.71,33.82],[8.94, 36.51],[13.41, 35.68],[13.21, 27.77]], 
   {fillColor: "#813", color: "#000", fillOpacity: 0.5})
   .bindPopup("This is my first polygon")
          .addTo(map);

Insert the objects into the script section of the source code just after the L.tileLayer code line.

<script>
var map = L.map('map').setView([9.00, 7.40] 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(map);
var polygon = L.polygon([[11.55, 25.36],[6.53, 25.08],[2.30, 28.32],[1.71, 33.82],[8.94, 36.51],[13.41, 35.68],[13.21, 27.77]], 
   {fillColor: "#813", color: "#000", fillOpacity: 0.5})
   .bindPopup("This is my first polygon")
          .addTo(map);
</script>