Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Configure and customize leaflet map in Drupal 7

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 921
    Comment on it


    Leaflet module provides a javascript library for mapping leaflet map into Drupal and can be downloaded from

    We can initialize map from our custom module as follow:

    $map_info = leaflet_map)get_info('OSM Mapnik');
    $features = array(
        'type' => 'point',
        'lat' => '28.6100',
        'lon' => '77.2300',
        'icon' => array(
          'iconUrl' => '/sites/all/themes/black_car/images/ridericon3.png'
        'leaflet_id' => 'leaflet_id'
    return leaflet_render_map($map_info,$features,'400px');

    this snipet will rendor map and then we can play with it like changing marker position and also fix marker position using our custom javascript. For this first we need to get object of map and marker:

    var map = Drupal.settings.leaflet[0].lMap;
    var marker =map._layers.leaflet_id;
    L.control.zoom({position: 'topright'}).addTo(map);

    Then we can manage map events as follow:

      map.on('move', function () {
      //Dragend event of map for update marker position
       map.on('dragend', function(e) {
        var cnt = map.getCenter();
        var position = marker.getLatLng();
        lat = Number(position['lat']).toFixed(5);
        lng = Number(position['lng']).toFixed(5);
           setLeafLatLong(lat, lng);

    Hope this will help someone.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: