0d4188d40b
The new code is shorter and uses more readable variable names. It does not depend on specifically named input fields anymore (allowing to use multiple maps on the same page), and only uses well-defined interfaces to trigger revalidation of input fields. The Map model class allows to add OSM maps to gluon-web forms.
85 lines
2.0 KiB
JavaScript
85 lines
2.0 KiB
JavaScript
/*
|
|
Build using:
|
|
|
|
uglifyjs javascript/gluon-web-osm.js -o files/lib/gluon/web/www/static/gluon-web-osm.js -c -m
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
function initOSM(openlayers_url, ready) {
|
|
var markerSvg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="45">'
|
|
+ '<path d="M2,15A13,13,0,0,1,28,13Q28,28,15,45Q2,28,2,15" fill="#48b" stroke="#369" stroke-width="1.5" />'
|
|
+ '<circle cx="15" cy="15" r="6" fill="#fff" />'
|
|
+ '</svg>';
|
|
|
|
var style = document.createElement('link');
|
|
style.rel = 'stylesheet';
|
|
style.type = 'text/css';
|
|
style.href = openlayers_url + '/css/ol.css';
|
|
document.head.appendChild(style);
|
|
|
|
var script = document.createElement('script');
|
|
var done = false;
|
|
script.onload = script.onreadystatechange = function() {
|
|
if (done)
|
|
return;
|
|
if (this.readyState && this.readyState !== "loaded" && this.readyState !== "complete")
|
|
return;
|
|
|
|
done = true;
|
|
|
|
|
|
var markerImg = new Image();
|
|
markerImg.onload = function() {
|
|
var markerStyle = new ol.style.Style({
|
|
image: new ol.style.Icon({
|
|
img: markerImg,
|
|
imgSize: [30, 45],
|
|
anchor: [0.5, 1]
|
|
})
|
|
});
|
|
|
|
var marker = new ol.Feature();
|
|
marker.setStyle(markerStyle);
|
|
|
|
ready(function(elMap, pos, zoom, set, onUpdate) {
|
|
var map = new ol.Map({
|
|
target: elMap,
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.OSM()
|
|
}),
|
|
new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
features: [marker]
|
|
})
|
|
})
|
|
],
|
|
view: new ol.View({
|
|
center: ol.proj.fromLonLat(pos),
|
|
zoom: zoom,
|
|
})
|
|
});
|
|
|
|
var refresh = function(coord) {
|
|
marker.setGeometry(new ol.geom.Point(coord));
|
|
}
|
|
|
|
map.addEventListener('click', function(e) {
|
|
refresh(e.coordinate);
|
|
onUpdate(ol.proj.toLonLat(e.coordinate));
|
|
});
|
|
|
|
if (set)
|
|
refresh(ol.proj.fromLonLat(pos));
|
|
|
|
return map;
|
|
});
|
|
}
|
|
|
|
markerImg.src = 'data:image/svg+xml,' + escape(markerSvg);
|
|
};
|
|
script.src = openlayers_url + '/build/ol.js';
|
|
document.head.appendChild(script);
|
|
}
|