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>
Related
I have a model (from another php class. I used a include sentence) with information in order to be shown on openstreet map as points. My code works fine but if I try to separate the code using a function, it doesnt work. My code, including the function is:
echo '
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
</head>
<body>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"> </script>
<div id="map" class="map"></div>
<script>
//I CREATE THE MAP
var attribution = new ol.control.Attribution({
collapsible: true
});
var map = new ol.Map({
controls: ol.control.defaults({attribution: false}).extend([attribution]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
maxZoom: 18
})
})
],
target: "map",
view: new ol.View({';
echo " center: ol.proj.fromLonLat([$longitud, $latitud]),
maxZoom: 18,
zoom: $zoom
})
});
";
// I READ THE MODEL GETTING LONGITUDE AND LATITUDE OF EACH POINT
$i;
if ($modeloDatos!=null) {
for($i=0;$i<sizeof($modeloDatos);$i++){
$modeloImprimir = $modeloDatos[$i];
$long=$modeloImprimir->getLongitud();
$lat=$modeloImprimir->getLatitud();
showCentro($long,$lat); //I CALL TH FUNCTION
}
}
echo "
</script>
</body>
</html>";
function showCentro($longi, $lati) { //I RECEIVE THE COORDNATES AND DRAW A FILLED POINT
echo "
map.addLayer(
new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([$longi,$lati]))})
]
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({ ";
echo'
color: "red"
})
})
})
});
);';
}
I would like to draw each point from the model separating the code and using a function in order to clarify the program.
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();
});
I am trying to load a layer on the OSM map using OL. The service which I have requires the authentication header, I have written the code but somehow it's not working. Here is my code
function customLoader(tile, src) {
var client = new XMLHttpRequest();
client.open('GET', src);
client.setRequestHeader("Ocp-Apim-Subscription-Key","XXXXXXXXXXXXXX");
client.onload = function() {
tile.getImage().src = src;
};
client.send();
}
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
extent: [-425988.3826589292,6390953.66876267,161047.99457094132,6677439.650775372],
source: new ol.source.TileWMS({
url: 'https://url.com/WMSServer',
tileLoadFunction: customLoader,
params: {'LAYERS': '21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0', 'TILED': true},
serverType: 'WMSServer',
transition: 0
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-4.095013, 56.550473],
zoom: 4
})
});
I am not sure what I am doing wrong.
I cannot get the base64 method to work either. It would be better to use the object url method from https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction (but note that object urls can cause memory leaks if not revoked)
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.4.3/css/ol.css" type="text/css">
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.4.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
maxZoom: 17,
tileLoadFunction: function (tile, src) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.addEventListener('load', function (evt) {
var data = this.response;
if (data !== undefined) {
var url = URL.createObjectURL(data);
tile.getImage().addEventListener('load', function () {
URL.revokeObjectURL(url);
});
tile.getImage().src = url;
} else {
tile.setState(3);
}
});
xhr.addEventListener('error', function () {
tile.setState(3);
});
xhr.open('GET', src);
xhr.send();
}
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
I am unable to load ol3cesium map in Ionic 2.
My index.html (code within body tag):
<ion-app></ion-app>
<script src="http://openlayers.org/en/v3.16.0/build/ol.js"
<script src="../ol3-cesium-v1.17/ol3cesium.js"></script>
<script src="../ol3-cesium-v1.17/Cesium/Cesium.js"></script>
My home.ts:
Inside constructor, below code is added --
var view = new ol.View({
projection: 'EPSG:4326',
center: [-100, 35],
zoom: 3
});
var layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
}
})
});
var overlay = new ol.layer.Tile({
opacity: 0.7,
extent: [-124.74, 24.96, -66.96, 49.38],
source: new ol.source.TileWMS(/** #type {olx.source.TileWMSOptions} */({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: { 'LAYERS': 'topp:states', 'TILED': true },
serverType: 'geoserver',
crossOrigin: 'anonymous'
}))
});
var ol2d = new ol.Map({
layers: [layer, overlay],
target: 'map2d',
view: view
});
var ol3d = new olcs.OLCesium({ map: ol2d });
var scene = ol3d.getCesiumScene();
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: '//assets.agi.com/stk-terrain/world'
});
ol3d.getCesiumScene().scene.terrainProvider = terrainProvider;
ol3d.setEnabled(true);
});
'map2d' is my div id in home.html.
I don't know why it is saying 'olcs is not defined' when running the project by ionic serve --lab. How can I resolve this JavaScript issue?
i solved it.
Actually i had to put cesium.js and ol3cesium inside www folder.
I'm trying to make a Polymer module for working with OpenLayers 3 and displaying openstreetmaps. I know there is a great module working with leaflet but I need some specifics functions like map orientation.
Anyway, I code something and it's working except one thing I can't figure out : When the page loads, only the commands are showing (Zoom + / Zoom -) and not the map (and not any thing such as marker, etc). But if I resize my window (my Chrome window I mean) the map appear and all is working fine !! I was thinking maybe something in relation with DOM Loading...
Module code :
<dom-module id="openlayer-map">
<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<style>
:host {
display: block;
}
#map
{
position: absolute;
height: 100%;
}
</style>
<template>
<div id="map" class="map"></div>
<!-- Tests
<input is="iron-input" bind-value="{{latitude}}" placeholder="latitude">
<input is="iron-input" bind-value="{{longitude}}" placeholder="longitude">
-->
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'openlayer-map',
properties:
{
currentCenter: Array,
currentView: ol.View,
olmap: ol.Map,
geolocation: ol.Geolocation,
layer: Object,
longitude:
{
type: Number,
value:12.889101100000062,
notify: true,
observer: '_updateLongitude'
},
latitude:
{
type: Number,
value: 15.7622695,
notify: true,
observer: '_updateLatitude'
},
geotracking:
{
value: false,
type: Boolean,
notify: true,
},
elemReady: Boolean,
},
ready: function()
{
console.log('openlayer-map ready');
this.initialConfig();
this.elemReady = true;
this.setCenter(this.latitude,this.longitude);
},
initialConfig: function()
{
console.log('initial config for the map...');
this.currentView = new ol.View({
zoom: 14
});
var source = new ol.source.OSM();
this.layer = new ol.layer.Tile();
this.layer.setSource(source);
this.olmap = new ol.Map({
layers: [this.layer],
target: this.$.map,
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: this.currentView
});
// Localisation
this.geolocation = new ol.Geolocation({
projection: this.currentView.getProjection()
});
this.geolocation.setTracking(this.geotracking);
if(this.geolocation)
{
var accuracyFeature = new ol.Feature();
this.geolocation.on('change:accuracyGeometry', function() {
accuracyFeature.setGeometry(this.geolocation.getAccuracyGeometry());
}.bind(this));
var positionFeature = new ol.Feature();
positionFeature.setStyle(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
})
})
}));
this.geolocation.on('change:position', function() {
var coordinates = this.geolocation.getPosition();
positionFeature.setGeometry(coordinates ?
new ol.geom.Point(coordinates) : null);
}.bind(this));
var featuresOverlay = new ol.layer.Vector({
map: this.olmap,
source: new ol.source.Vector({
features: [accuracyFeature, positionFeature]
})
});
}
},
_updateLatitude: function(newValue, oldValue)
{
if(this.elemReady)
{
console.log('update latitude from '+oldValue+' to '+newValue);
this.setCenter(newValue, this.longitude);
}
else
{
console.log('_updateLatitude: waiting element to be ready');
}
},
_updateLongitude: function(newValue, oldValue)
{
if(this.elemReady)
{
console.log('update longitude from '+oldValue+' to '+newValue);
this.setCenter(this.latitude, newValue);
}
else
{
console.log('_updateLatitude: waiting element to be ready');
}
},
setCenter: function(latitude, longitude)
{
var center = [longitude, latitude];
this.currentCenter = ol.proj.fromLonLat(center);
console.log('update center of the map with latitude = '+latitude+' and longitude = '+longitude);
this.currentView.centerOn(this.currentCenter,[400,400], [0,0]);
},
});
})();
</script>
And the call in Polymer :
<openlayer-map latitude="48.853" longitude="2.35" geotracking></openlayer-map>
Any clue ?
Found it ! Needed to do the map initialization in an asynchronous call
attached: function()
{
this.async(function()
{
this.initialConfig(); // Create your ol.Map here
});
},