Uschuetzenmeister: Created page with "NOTOC This is the widget: display map. It displays an interactive map on the page where it is called.

Call: {{#widget: display map |markerdata=array of JSON objects |height=integer |width = integer}}

Parameters:
**markerdata: required, a JSON Object that is created through a template (see e.g. template:webmo map main page* and below for further info) or directly to the widget l..."

2024-04-06T12:26:41Z

Created page with "<noinclude>__NOTOC__ This is the widget: display map. It displays an interactive map on the page where it is called. Call: <nowiki>{{#widget: display map |markerdata=array of JSON objects |height=integer |width = integer}}</nowiki> Parameters: *markerdata: required, a JSON Object that is created through a template (see e.g. template:webmo map main page and below for further info) or directly to the widget l..."

New page

<noinclude>__NOTOC__
This is the widget: display map. It displays an interactive map on the page where it is called. 

Call: <nowiki>{{#widget: display map |markerdata=array of JSON objects |height=integer |width = integer}}</nowiki> 
Parameters: 
*markerdata: required, a JSON Object that is created through a template (see e.g. template:webmo map main page and below for further info) or directly to the widget like: [{marker1 data},{marker2 data},{marker3 data}] 
*height: optional, integer in pixels, e.g.: 500; defaults to 700 
*width: optional, integer in pixels, e.g.: 500; defaults to 100% 

By sending different data to the widget you may modify the map that gets displayed. The data comes in the JSON format. If ineterested, please check out the gentle [https://github.com/edsu/json-intro/blob/master/python.md json introduction].

The data set with the parameter markerdata is an array of JSON objects. It works like an array of records. Each record represents a marker and contains data belonging to that marker. The data contained in markerdata could be the coordinates or any HTML content that can be displayed as a popup. Or a date to check against the current date to display expired markers differently. 

For example, the following abstract array contains data for three markers: 

[{marker1 data},{marker2 data},{marker3 data}] 

Let's take the first record {marker1 data} as an exmaple. In its most basic form it needs to look like this: 
{"coordinates": "34.32, -32.333"} 

This will draw a map and place a blue marker icon at the location. Extending the record like this: 
1) {"coordinates": "34.32, -32.333", "popupContent":"Test"} 
2) {"coordinates": "34.32, -32.333", "projectEndDate":"2012-07-03"} 
3) {"coordinates": "34.32, -32.333", "pathToMarkerIconCurrent":"http://domain.xu/test.jpg", "pathToMarkerIconExpired":"http://domain.xu/test.jpg", } 

will 

1) add a popup to the marker which displays the content "Test". You can use HTML and add images and tables. 
2) evaluate each marker against the current date and display a different marker if projectEndDate < now 
3) change the default icons to the ones provided found at the url 

Below is an example array which contains all available options. It will put two markers on a map with custom icons. The markers will have different icons depending on whether the dates are in the past or not. The names "coordinates", "projectEndDate", "popupContent", "pathToMarkerIconCurrent", "pathToMarkerIconExpired" are fixed an must not be changed.

[
{"coordinates": "34.32, -32.333", "popupContent":"test", "pathToMarkerIconCurrent":"http://domain.xu/test.jpg", "pathToMarkerIconExpired":"http://domain.xu/test.jpg","projectEndDate":"2018-07-03"},

{"coordinates": "24.32, -31.333", "popupContent":"test2", "pathToMarkerIconCurrent":"http://domain.xu/test.jpg", "pathToMarkerIconExpired":"http://domain.xu/test.jpg","projectEndDate":"2012-07-03"}
]

Created by [idea-sketch.com idea-sketch.com]
</noinclude>
<includeonly>




<div id="map-" style="width: ; height: ">
<script>
// defer script execution until the mediawiki loader and jQuery are available
RLQ.push([[], function () {
mw.loader.using('ext.iswiki.display_map').then( function() {
var mapId = "";
var markerData = [];
var polygonData = [];
var widgetParams = {isGroupCoordinates:false};
drawmap(mapId, markerData, polygonData, widgetParams);
});
}]);
</script>
</div></includeonly>

Widget:Display map - Revision history