Using the jMapping jQuery plugin in Drupal

Events happening in the community are now at Drupal community events on www.drupal.org.
Adam S's picture

It's my fourth program ever so be nice. On Github I took the Views Gallerific module and mapped it (no pun intended) to use the jMapping jQuery plugin.

I think that using the jquery.data method is an efficient way to add geographic information to a Views row for populating a map. Each row of the View has an element with a data attribute that contains the nid of the row which is used by querying it with the data() method. Because of this I'll be able to add an event listener that updates the map when an Ajax call is returned very easily.

I also have a mumble jumble of hacked together modules based on Addressfield, Location, Geofield, and Geolocation Field. I would like to at some point create a module from them that hooks into Addressfield and Geofield by simply adding a pure jQuery client side geocoder that is implemented though a form alter hook. It basically does nothing except geocode the address found in the Addressfield modules's fields and populates the Geofield by pressing a button or adding a reversed geocoded address to Addressfield module's fields based on the input in the Geofield module's field. This would also include my porting of proximity and distance filters from the Location module to Geofield.

Comments

Converting from location to

TimelessDomain's picture

Converting from location to geofield & addressfield sounds ideal. Geocoders are probably the only things really holding back the development of geo-sites & your solution for this would be a great.

Freedom Isn't Free

Can't get JMapping to Work in Page

mry4n's picture

I'm trying to get the JMapping plugin to work in a Drupal page by following the example on the JMapping Usage page: http://vigetlabs.github.com/jmapping/usage.html

But I can't get a map to appear. Here's what I'm putting in a Drupal page using the PHP filter

<?php

drupal_add_js
('sites/default/files/scripts/jquery.jmapping-2.1.0/jquery.jmapping.js');
drupal_add_js('sites/default/files/scripts/markermanager.js');
drupal_add_js('sites/default/files/scripts/jquery.metadata.2.1/jquery.metadata.js');
drupal_add_js('sites/default/files/scripts/StyledMarker.js');

drupal_set_html_head('<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>');

drupal_set_html_head('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>');

drupal_add_js('$(document).ready(function(){
  $("#map").jMapping();
});'
,'inline');


?>


<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data-jmapping="{id: 5, point: {lat: 35.925, lng: -79.053}, category: 'Gas'}">
    <a href="#" class="map-link">Some Place</a>
    <div class="info-box">
      <p>Some thing for the info box.</p>
    </div>
  </div>
  <div class="map-location" data-jmapping="{id: 8, point: {lat: 35.935, lng: -79.024}, category: 'Food'}">
    <a href="#" class="map-link">Another Place</a>
    <div class="info-box">
      <p>Example Text.</p>
    </div>
  </div>
</div>

Any ideas on what it is that I'm doing wrong?

Needed to add height/width to #map

mry4n's picture

Just figured out that all I needed to do was add height & width to the #map div. I hadn't included the stylesheet from JMapping's example.

Location and Mapping

Group organizers

Group categories

Wiki type

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: