/* global ol */ var current_module; var feature_style = new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({color: '#3399CC'}), stroke: new ol.style.Stroke({color: '#fff', width: 2}) }) }); var get_geoloc = function(map_id){ let coordinates = geolocation[map_id].getPosition(); console.log(geolocation[map_id].getPosition()); let v = current_module.map.getView(); v.animate({center: coordinates, duration: animation_duration * 2}); $("#id_buffer").val(geolocation[map_id].getAccuracy().toFixed(2)); $("#collapse-tampon").show(); $("#id_buffer_type").val($("#id_buffer_type option:eq(1)").val()); current_module.featureCollection.clear(); let feat = new ol.Feature(); feat.setStyle(feature_style); feat.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null); current_module.featureCollection.push(feat); }; var set_geoloc_source = function(map_id){ geolocation[map_id] = new ol.Geolocation({ projection: view_projection }); geolocation[map_id].setTracking(true); geoloc_activated_message(map_id); }; var wait_for_position = function(map_id){ let get_position = function(){ if (!geolocation[map_id].getPosition()){ setTimeout(get_position, 200); } else { get_geoloc(map_id); } }; setTimeout(get_position, 200); } var TrackPositionControl = (function (Control) { function TrackPositionControl(opt_options) { var options = opt_options || {}; this.map_id = options['map_id']; var button = document.createElement('button'); button.type = "button"; button.innerHTML = ''; button.title = track_me_msg; var element = document.createElement('div'); element.className = 'track-position ol-unselectable ol-control'; element.appendChild(button); Control.call(this, { element: element, target: options.target }); button.addEventListener( 'click', this.handleTrackPosition.bind(this), false ); } if ( Control ) TrackPositionControl.__proto__ = Control; TrackPositionControl.prototype = Object.create( Control && Control.prototype ); TrackPositionControl.prototype.constructor = TrackPositionControl; TrackPositionControl.prototype.handleTrackPosition = function handleTrackPosition () { if (!geolocation[this.map_id]){ set_geoloc_source(this.map_id); wait_for_position(this.map_id); } else { if (!geoloc_activated[this.map_id]) return; if (geolocation[this.map_id].getTracking()){ geolocation[this.map_id].setTracking(true); get_geoloc(this.map_id); } else { geolocation[this.map_id].setTracking(true); if (display_info) display_info(geoloc_activated_msg); wait_for_position(this.map_id); } } return false; }; return TrackPositionControl; }(ol.control.Control)); var MousePositionControl = function() { return new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326', }); }; var GeometryTypeControl = function(opt_options) { 'use strict'; // Map control to switch type when geometry type is unknown var options = opt_options || {}; var element = document.createElement('div'); element.className = 'switch-type type-' + options.type + ' ol-control ol-unselectable'; if (options.active) { element.className += " type-active"; } var self = this; var switchType = function(e) { e.preventDefault(); if (options.widget.currentGeometryType !== self) { options.widget.map.removeInteraction(options.widget.interactions.draw); options.widget.interactions.draw = new ol.interaction.Draw({ features: options.widget.featureCollection, type: options.type }); options.widget.map.addInteraction(options.widget.interactions.draw); var className = options.widget.currentGeometryType.element.className.replace(/ type-active/g, ''); options.widget.currentGeometryType.element.className = className; options.widget.currentGeometryType = self; element.className += " type-active"; } }; element.addEventListener('click', switchType, false); element.addEventListener('touchstart', switchType, false); ol.control.Control.call(this, { element: element }); }; // custom Ishtar - inherits not available anymore on new ol // ol.inherits(GeometryTypeControl, ol.control.Control); var ol_ext_inherits = function(child, parent) { child.prototype = Object.create(parent.prototype); child.prototype.constructor = child; }; ol_ext_inherits(GeometryTypeControl, ol.control.Control); // end custom Ishtar // TODO: allow deleting individual features (#8972) (function() { 'use strict'; var jsonFormat = new ol.format.GeoJSON(); function MapWidget(options) { this.map = null; this.interactions = {draw: null, modify: null}; this.typeChoices = false; this.ready = false; // Default options this.options = { default_lat: 0, default_lon: 0, default_zoom: 12, is_collection: options.geom_name.indexOf('Multi') > -1 || options.geom_name.indexOf('Collection') > -1 }; // Altering using user-provided options for (var property in options) { if (options.hasOwnProperty(property)) { this.options[property] = options[property]; } } if (!options.base_layer) { this.options.base_layer = new ol.layer.Tile({source: new ol.source.OSM()}); } this.map = this.createMap(); this.featureCollection = new ol.Collection(); this.featureOverlay = new ol.layer.Vector({ map: this.map, source: new ol.source.Vector({ features: this.featureCollection, useSpatialIndex: false // improve performance }), updateWhileAnimating: true, // optional, for instant visual feedback updateWhileInteracting: true // optional, for instant visual feedback }); // Populate and set handlers for the feature container var self = this; this.featureCollection.on('add', function(event) { var feature = event.element; feature.on('change', function() { self.serializeFeatures(); }); if (self.ready) { self.serializeFeatures(); if (!self.options.is_collection) { self.disableDrawing(); // Only allow one feature at a time } } }); var initial_value = document.getElementById(this.options.id).value; if (initial_value) { var features = jsonFormat.readFeatures('{"type": "Feature", "geometry": ' + initial_value + '}'); var extent = ol.extent.createEmpty(); features.forEach(function(feature) { this.featureOverlay.getSource().addFeature(feature); ol.extent.extend(extent, feature.getGeometry().getExtent()); }, this); // Center/zoom the map this.map.getView().fit(extent, {maxZoom: this.options.default_zoom}); } else { this.map.getView().setCenter(this.defaultCenter()); } this.createInteractions(); if (initial_value && !this.options.is_collection) { this.disableDrawing(); } this.ready = true; } MapWidget.prototype.createMap = function() { // custom Ishtar var layers = [this.options.base_layer]; if (this.options.layers) layers = this.options.layers; var options = { target: this.options.map_id, layers: layers, view: new ol.View({ zoom: this.options.default_zoom }) }; if (this.options.controls) options["controls"] = this.options.controls; // end custom Ishtar var map = new ol.Map(options); return map; }; MapWidget.prototype.createInteractions = function() { // Initialize the modify interaction this.interactions.modify = new ol.interaction.Modify({ features: this.featureCollection, deleteCondition: function(event) { return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); } }); // Initialize the draw interaction var geomType = this.options.geom_name; if (geomType === "Unknown" || geomType === "GeometryCollection") { // Default to Point, but create icons to switch type geomType = "Point"; this.currentGeometryType = new GeometryTypeControl({widget: this, type: "Point", active: true}); this.map.addControl(this.currentGeometryType); this.map.addControl(new GeometryTypeControl({widget: this, type: "LineString", active: false})); this.map.addControl(new GeometryTypeControl({widget: this, type: "Polygon", active: false})); this.typeChoices = true; } this.map.addControl(new MousePositionControl()); if (geomType == 'Point' && location.protocol == 'https:'){ this.map.addControl(new TrackPositionControl({"map_id": this.options.map_id})); } this.interactions.draw = new ol.interaction.Draw({ features: this.featureCollection, type: geomType }); this.map.addInteraction(this.interactions.draw); this.map.addInteraction(this.interactions.modify); }; MapWidget.prototype.defaultCenter = function() { var center = [this.options.default_lon, this.options.default_lat]; if (this.options.map_srid) { return ol.proj.transform(center, 'EPSG:4326', this.map.getView().getProjection()); } return center; }; MapWidget.prototype.enableDrawing = function() { this.interactions.draw.setActive(true); if (this.typeChoices) { // Show geometry type icons var divs = document.getElementsByClassName("switch-type"); for (var i = 0; i !== divs.length; i++) { divs[i].style.visibility = "visible"; } } }; MapWidget.prototype.disableDrawing = function() { if (this.interactions.draw) { this.interactions.draw.setActive(false); if (this.typeChoices) { // Hide geometry type icons var divs = document.getElementsByClassName("switch-type"); for (var i = 0; i !== divs.length; i++) { divs[i].style.visibility = "hidden"; } } } }; MapWidget.prototype.clearFeatures = function() { this.featureCollection.clear(); // Empty textarea widget document.getElementById(this.options.id).value = ''; this.enableDrawing(); }; MapWidget.prototype.serializeFeatures = function() { // Three use cases: GeometryCollection, multigeometries, and single geometry var geometry = null; var features = this.featureOverlay.getSource().getFeatures(); if (this.options.is_collection) { if (this.options.geom_name === "GeometryCollection") { var geometries = []; for (var i = 0; i < features.length; i++) { geometries.push(features[i].getGeometry()); } geometry = new ol.geom.GeometryCollection(geometries); } else { geometry = features[0].getGeometry().clone(); for (var j = 1; j < features.length; j++) { switch (geometry.getType()) { case "MultiPoint": geometry.appendPoint(features[j].getGeometry().getPoint(0)); break; case "MultiLineString": geometry.appendLineString(features[j].getGeometry().getLineString(0)); break; case "MultiPolygon": geometry.appendPolygon(features[j].getGeometry().getPolygon(0)); } } } } else { if (features[0]) { geometry = features[0].getGeometry(); } } document.getElementById(this.options.id).value = jsonFormat.writeGeometry(geometry); }; window.MapWidget = MapWidget; })();