Maps

Basic Map - One marker

This is a basic Leaflet map implementation with a custom marker. Everything is for you and this map can be created by calling a simple function.

Show code sample

// coordinates for the center of the map and the marker
var lat = 40.732346;
var long = -74.0014247;
var markerImage = 'img/map-marker-default.svg';
// id of the map DOM element
var id = 'map-3';
createBasicMap(id, lat, long, markerImage);

Styled Map - One marker

An example of the styled Leaflet map with a custom marker. You can easily replace the look by changin to another theme from Leaflet Providers.

Show code sample

// coordinates for the center of the map and the marker
var lat = 40.732346;
var long = -74.0014247;
var markerImage = 'img/map-marker-default.svg';
// id of the map DOM element
var id = 'map-1';
createSimpleMap(id, lat, long, markerImage);

Styled Map - Multiple markers with infobox, images and structured content from JSON

More complex implementation: data are loaded from a JSON file and custom infobox with an image is used in this example. Again, everything's prepared for you.

Show code sample

var options = {
    jsonFile: 'data/restaurants-geojson.json',
    markerPath: 'img/map-marker-default.png',
    mapId: 'map-2'
}

createAdvancedMap(options);