(Last update: 12/05/2011)
MapWrapper is a jQuery plugin which allows you to easily include a map without messing around with maps apis.
Actually MapWrapper can only load Bing Map v7 maps.
Key features:
Let's learn fast by example!
Here some standalone example of the MapWrapper features, you can combine those example to include your custom map in your web site (remember: you have to create your own map credentials at site bingmapsportal and overwrite mine in the attribute "credentials"):
Questions, comments or bug notifiation? Write me an email
HTML definition
Actually, I'm working to write down a good explaination on how the html definition of the map must be written.
For now consider having a look at the examples in order to learn how to write the html and have a look at the XSD definition that it must follow.
Advanced calls
The map is created by calling $('[map_selector]').mapWrapper();
You can alter the default settings of the map plugin by passing parameters to the call, for example:
$('.map').mapWrapper({
pushpinSelector:".myPushpin",
imgPushpinHoverSelector:".ppHover"
});
Here the complete list of the parameters:
Api
By calling $('[map_selector]').data("mapWrapper"), you can have access to the map api that exposes those functions:
Notes
The pushpin image can be centered in order to point in the exact location by using anchorX and anchorY attributes, for example:
<div class="pushpin" latitude="45.48362200" longitude="9.19517226" width="33" height="22" anchorX="11" anchorY="22">...</div>
MapWrapper is a jQuery plugin which allows you to easily include a map without messing around with maps apis.
Actually MapWrapper can only load Bing Map v7 maps.
Key features:
- Easily load maps with minimum javascript code written: almost everyting is defined in the html, making the code highly readable
- Configurable css class names
- Multiple pushpins include, eventually with callouts
- Route path calculation
- Api for advanced calls
- jQuery plugin standard compliant
Let's learn fast by example!
Here some standalone example of the MapWrapper features, you can combine those example to include your custom map in your web site (remember: you have to create your own map credentials at site bingmapsportal and overwrite mine in the attribute "credentials"):
- This is the default map loaded with no pushpins. It requires the minimum code to be written.
- You can add a pushpin and, if you want, a message to be displayed when the map is not loaded yet.
- Now you can add a callout to the pushpin with the style you want
- ... and change pushpin image on mouse over.
- You can disable inputs (a static map) and you can hide the dashboard
- ... and you can display copyright and/or scalebar.
- And now an example of route!
- This is an example of adding pushpin after the map is loaded getting data from a div
- This is an example of adding pushpin after the map is loaded specifing latitude/logitude and a pushpin template to define how the pushpin must look like (for example in case of an ajax call) - thanks to Jonas Plitt for reporting
- Create your own map credentials at site bingmapsportal
- Include Bing maps scripts, jQuery scripts and MapWrapper scripts
- Write down html code to configure and design the map (use your own map credentials)
- Call the MapWrapper plugin
Questions, comments or bug notifiation? Write me an email
HTML definition
Actually, I'm working to write down a good explaination on how the html definition of the map must be written.
For now consider having a look at the examples in order to learn how to write the html and have a look at the XSD definition that it must follow.
Advanced calls
The map is created by calling $('[map_selector]').mapWrapper();
You can alter the default settings of the map plugin by passing parameters to the call, for example:
$('.map').mapWrapper({
pushpinSelector:".myPushpin",
imgPushpinHoverSelector:".ppHover"
});
Here the complete list of the parameters:
- pushpinSelector (default ".pushpin"): the class of the pushpins
- doNotHideProcessedPushpins (default false): if true the dom of the pushpin will not be hidden
- routeAlertSelector (default ".routeAlert"): the class of the alert that will be displayed when the route is calculating the route
- mapLoadAlertSelector (default ".mapLoadAlert"): the class of the alert that will be displayed when the map is loading
- routeOriginPushpinSelector (default ".routeOriginPushpin"): the selector of the pushpin that indicates the origin of the route
- routeDestinationPushpinSelector (default ".routeDestinationPushpin"): the selector of the pushpin that indicates the destination of the route
- imgPushpinHoverSelector (default ".hover"): the class of the image that is displayed when the mouse is over the pushpin
- pushpinCalloutSelector (default ".pushpinCallout"): the class of the callout that is displayed near the pushpin on mouse over
- calloutHideDelayTime (default 500): when mouse went out of the pushpin, this is the time in milliseconds after which the callout is hidden
- pushpinCalloutLeftSideClassName (default "leftSideCallout"): the class that display the callout to the right side of the pushpin when there is no place in the left side
- routeSelector (default ".route"): the class of the route settings
- pushpinCalloutBeakSelector (default ".boxCallout-beak"): the class of the beak
Api
By calling $('[map_selector]').data("mapWrapper"), you can have access to the map api that exposes those functions:
- centerAndZoomToPosition(latitude, longitude, zoom): it centers the map and zoom
- setMapType(mapType): it sets the map type (see this link); possible values are aerial, auto (the map is set to choose the best imagery for the current view), birdseye, collinsBart (Collin’s Bart (mkt=en-gb) map type is being used), mercator, ordnanceSurvey (Ordinance Survey (mkt=en-gb) map type is being used), road (this is the default)
- addPushpins(pushpinRootSelector,pushpinSelector): add pushpins dom-based to the already loaded map (see this example)
- addPushpinsTemplated(pushpinTemplateSelector,latitude,longitude): add pushpins to the already loaded map using a template to define the pushpin appearence (see this example)
- route(lat1,lon1,lat2,lon2,optimize,callback): calculate a route (see this example)
Notes
The pushpin image can be centered in order to point in the exact location by using anchorX and anchorY attributes, for example:
<div class="pushpin" latitude="45.48362200" longitude="9.19517226" width="33" height="22" anchorX="11" anchorY="22">...</div>
If you like this plugin, please consider making a donation:
