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
    • 1.13k
    Comment on it

    Hi,

    Leaflet module provides a javascript library for mapping leaflet map into Drupal and can be downloaded from https://drupal.org/project/leaflet

    We can initialize map from our custom module as follow:

    $map_info = leaflet_map)get_info('OSM Mapnik');
    $map_info['settings']['zoom']='15';
    $features = array(
      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 () {
        marker.setLatLng(map.getCenter());
        //console.log(map.getCenter());
       });
      //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);
        //console.log(position);
           setLeafLatLong(lat, lng);
          //alert(cnt);
     });
    

    Hope this will help someone.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: