What is the event add in selectedFeatures.on('add', function(event) {?
I'm trying to add a popup to an OpenLayers map. From OpenLayers Beginner's Guide, Gratier et. al., I grabbed the code to add information on the point to a fixed element on the page as sort of a proof of concept. I ultimately want a popup at the clicked point. But first I'm trying to understand this code. I can't find anything out about the add event. The add responds to a click. If add is changed to click, the clicked diamond changes to a default blue dot, but the #address-info is not changed.
Overview: a map is created and all points from a geojson are shown as small diamonds on the map in the locationsLayer. I want to click or hover (preferred) and have the addressInfo popup next to the diamond. The project has multiple layers of basemaps (removed from the code here). It's all in a Rails project. OL v6.5.0. jQuery v3.4.1.
console.log('olAllLocationsSimplified.js is the JavaScript being used.');
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Icon, Fill, Stroke, Style, Text, Circle} from 'ol/style';
import {transform} from 'ol/proj';
import LayerGroup from 'ol/layer/Group';
import TileLayer from 'ol/layer/Tile';
import Overlay from 'ol/Overlay';
import Point from 'ol/geom/Point';
import OSM from 'ol/source/OSM';
import {transformExtent, fromLonLat} from 'ol/proj';
import Select from 'ol/interaction/Select';
import Feature from 'ol/Feature';
var baseLayers = new LayerGroup({
title: 'Base maps—Historic and Current',
layers: [
new TileLayer({
source: new OSM(),
}),
],
});
var svgDiamond = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-diamond-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098L6.95.435z"/></svg>';
var styleDiamond = new Style({
image: new Icon({
opacity: 1,
src: 'data:image/svg+xml;utf8,' + svgDiamond,
scale: 0.5,
}),
});
var vectorLocations = new VectorSource({
url: 'map/locationmap',
format: new GeoJSON(),
projection: 'EPSG:3857',
})
// All the locations put on the map with a small diamond
var locationsLayer = new VectorLayer({
source: vectorLocations, // the geojson
style: styleDiamond
});
var container = document.getElementById('popup');
// Create an overlay to anchor the popup to the map.
// var overlay = new Overlay({
// element: container,
// autoPan: true,
// autoPanAnimation: {
// duration: 250,
// },
// });
var map = new Map({
target: 'map',
layers: [baseLayers, locationsLayer],
// overlays: [overlay], // for popup
view: new View({
center: fromLonLat([-118.243507, 34.052211]),
zoom: 15,
maxZoom: 21,
}),
});
var select = new Select({
layers: [locationsLayer]
});
map.addInteraction(select);
var selectedFeatures = select.getFeatures();
selectedFeatures.on('add', function(event) {
var feature = event.target.item(0);
var addressInfo = feature.get('popup');
$('#address-info').html('Clicked on: ' + addressInfo + '. Indicated with a blue dot.'); // This is working
});
selectedFeatures.on('remove', function(event) {
$('#address-info').empty();
});
Related
I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.
I have a problem in my open layer (6.1.) project with a popup bubble.
I am not able to create and see the popup and fill it, not even with a single GeoJSON layer with cities.
I read this without progress:
popup with multiple points features
I would like just render the name of the city when clicking on the icon.
Index.html
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="icon" href="pic/fav.png" sizes="192x192" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Retail Space</title>
</head>
<!--++++++++++++++++++++++++++++++++++++++ BODY +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++>
<body>
<div id="container">
<!--++++++++++++++++++++++++++++++++++++++ HEADERBAR +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++>
<div id="headerbar">
<div id="logobar">
</div>
<div id="controlbar">
</div>
</div>
<!--++++++++++++++++++++++++++++++++++++++ MAPBAR +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++>
<div id="map-container" ><div id="popup"></div>
<div id="tooltip" class="tooltip"></div>
</div>
<script src="main.js"></script>
</div> <!--/container-->
</body>
</html>
main.js
import GeoJSON from 'ol/format/GeoJSON';
import TileJSON from 'ol/source/TileJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import TileLayer from 'ol/layer/Tile';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import OSM from 'ol/source/OSM';
import TileWMS from 'ol/source/TileWMS';
import Overlay from 'ol/Overlay';
import {Style, Fill, Stroke, Icon} from 'ol/style';
import {fromLonLat} from 'ol/proj';
import sync from 'ol-hashed';
var iconStyle_municip = new Style({
image: new Icon({
anchor: [0.5, 5],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'pic/municip.png'
})
});
//OSM layer creation
var OSMmap = new TileLayer({
source: new OSM(),
format: new GeoJSON({featureProjection: 'EPSG:3857'}),
});
//Obce 5000+ layer creation
var cities = new VectorLayer({
source: new VectorSource({
format: new GeoJSON({featureProjection: 'EPSG:3857'}),
url: 'obce5000geojson.geojson'
})
});
cities.setStyle(iconStyle_municip);
//Map initiation
new Map({
target: 'map-container',
layers: [OSMmap, cities],
view: new View({
center: fromLonLat([15, 49.80]),
zoom: 8
}),
});
//tooltip start
var element = document.getElementById('popup');
var popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50]
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
}
);
if (feature) {
var coordinates = this.getCoordinateFromPixel(evt.pixel);
popup.setPosition(coordinates);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('obec')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
Main problem is you aren't retaining a reference to your map variable.
//Map initiation
new Map({
target: 'map-container',
layers: [OSMmap, cities],
view: new View({
center: fromLonLat([15, 49.80]),
zoom: 8
}),
});
That fails when the code tries to use it:
map.addOverlay(popup);
Keep a reference to the map:
//Map initiation
var map = new Map({
target: 'map-container',
layers: [OSMmap, cities],
view: new View({
center: fromLonLat([15, 49.80]),
zoom: 8
}),
});
proof of concept fiddle
code snippet:
var iconStyle_municip = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 5],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
})
});
//OSM layer creation
var OSMmap = new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM(),
format: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'}),
});
//Obce 5000+ layer creation
var cities = new ol.layer.Vector({ // VectorLayer({
source: new ol.source.Vector({ // VectorSource({
format: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'}),
url: 'https://api.myjson.com/bins/upiqa'
})
});
cities.setStyle(iconStyle_municip);
//Map initiation
var map = new ol.Map({
target: 'map-container',
layers: [OSMmap, cities],
view: new ol.View({
center: ol.proj.fromLonLat([15, 0]),
zoom: 2
}),
});
//tooltip start
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -10]
});
map.addOverlay(popup);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
}
);
if (feature) {
var coordinates = this.getCoordinateFromPixel(evt.pixel);
popup.setPosition(coordinates);
$(element).popover({
'placement': 'top',
'html': true,
'content': "test content" // feature.get('obec')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-container {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#popup {
background: #FFFFFF;
border: black 1px solid;
}
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="map-container" class="map"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery-popover#0.0.4/src/jquery-popover.min.js"></script>
<div id="popup">
<b>test</b>
</div>
Anyone know why the map is shown tilted instead of a top view? I am using arcgis js with WMS for the map. Inside the body you will need to put a div:
<div id="viewDiv"></div>
This is my js code:
var map, view, layer;
require([
"esri/tasks/Locator",
"esri/Map",
"esri/views/MapView",
"esri/layers/WMSLayer"
], function (Locator, Map, MapView, WMSLayer) {
layer = new WMSLayer({
url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms'
});
var locatorTask = new Locator({
url:
"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
});
map = new Map({
basemap: {
baseLayers: [layer]
}
});
view = new MapView({
map: map,
container: "viewDiv",
constraints: {
rotationEnabled: false
}
});
});
I have a ol 3.10.1 map where the goal is to redraw the features of a layer dynamically. On the road to get there, I'm using the source.clear() function. The strange thing is that the source.clear() actually clear the features from the layer at the current zoom level, but while zooming in or out the features are still there. Am I using the source.clear() function the correct way? Please find bellow the code snippet which I'm using for testing purposes.
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': [new ol.style.Style({
image: image
})]};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
var CITYClusterSource = new ol.source.Cluster({
source: new ol.source.Vector({
url: 'world_cities.json',
format: new ol.format.GeoJSON(),
projection: 'EPSG:3857'
}),
})
var CITYClusterLayer = new ol.layer.Vector({
source: CITYClusterSource,
style: styleFunction
});
setTimeout(function () { CITYClusterSource.clear(); }, 5000);
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
CITYClusterLayer
],
view: new ol.View({
center: ol.proj.transform([15.0, 45.0], 'EPSG:4326', 'EPSG:3857'),
zoom:3
})
});
I'm using the setTimout() function to have the features visible for some seconds, before they are supposed to be cleared.
Please advice.
UPDATE: http://jsfiddle.net/jonataswalker/ayewaz87/
I forgot, OL will load your features again and again, for each resolution. So if you want to remove once and for all, use a custom loader, see fiddle.
Your source is asynchronously loaded, so set a timeout when it's ready:
CITYClusterSource.once('change', function(evt){
if (CITYClusterSource.getState() === 'ready') {
// now the source is fully loaded
setTimeout(function () { CITYClusterSource.clear(); }, 5000);
}
});
Note the once method, you can use on instead of it.
im learing OpenLayers 3 and i am trying to assign an png image to the logo attribute of the layer.Vector.source like this:
var vectorSpeedLimit40 = new ol.layer.Vector({
title: 'speedlimit40',
source: new ol.source.Vector({
url: 'gpx/Fotoboks_40.gpx',
format: new ol.format.GPX({
extraStyles: false
}),
logo: '/imgs/lc.png'
})
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorSpeedLimit40],
target: document.getElementById('map-canvas'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
Where i thought this would show instances of the png, it shows small blue circles instead like this:
I have checked, double checked, triple checked and the path is correct relative to the client.
What am i doing wrong? Thanks!
To assign a specific image to a vectorLayer with a GPX source you have to assign the image property a new ol.style.Icon with the src attribute to the image like this:
var vectorSource = new ol.source.Vector({
// Specify that the source is of type GPX
format: new ol.format.GPX(),
// Here you specify the path to the image file
url: 'gpx/source.gpx'
})
var vectorStyle = new ol.style.Style({
// Set the image attribute to a new ol.style.Icon
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
scale: 0.2,
// Here you specify the path to the image file
src: 'imgs/image.png'
}))
})
var vectorLayer = new ol.layer.Vector({
// Here you specify the source and style attributes of the ol.layer.Vector to the ones that are made above
source: vectorSource,
style: vectorStyle
});
// Then add it to the map
map.addLayer(vectorLayer);