0

Im complete newbie in scripting and I have problem which I can't solve (and I searched whole web for days for coming here for answer). Im trying to make very simple completely static image map. I managed to put markers on it and the problem I encountered is that, even I used lot of examples from the web, I can't make popup to open on click on marker which will then contain some description for that specific marker.

For the simplicity, Ill put the usual 'Online communities' static image map with one marker in the code.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com   /bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js">    </script>

</head>
<body>
    <div id="map" class="map">
    <script src="index.js"></script>

</body>
</html>


index.js

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {getCenter} from 'ol/extent';
import ImageLayer from 'ol/layer/Image';
import Projection from 'ol/proj/Projection';
import Static from 'ol/source/ImageStatic';


  // Map views always need a projection.  Here we just want to map     image
    // coordinates directly to map coordinates, so we create a projection that uses
    // the image extent in pixels.
    var extent = [0, 0, 1887, 949];
    var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });

    var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([586, 256]),
    name: 'Null Island', 
     population: 4000,
    rainfall: 500

});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        src: 'https://i.ibb.co/z6HKFRB/iconfinder-map-marker-299087-1.png'
    })
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
    features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

var map = new ol.Map({
layers: [
    new ol.layer.Image({
        source: new ol.source.ImageStatic({
            attributions: [
                new ol.Attribution({
                    html: 'Online communities - example - xkcd'
                })
            ],
            url: 'https://imgs.xkcd.com/comics/online_communities.png',
            projection: projection,
            imageExtent: extent
        })
    }), 
    vectorLayer,
],
target: document.getElementById('map'),
view: new ol.View({
    projection: projection,
    center: [500, 500, 500, 500],
    extent: [500, 500, 500, 500],
    zoom: 2.7,
    minZoom: 2.7,
    maxZoom: 2.7
})
});

3
  • Have a look at this example: openlayers.org/en/latest/examples/icon.html
    – TomazicM
    Mar 30 '20 at 10:14
  • I tried to implement that example but it doesnt work on static images which is base layer. or i dont know how to make it work Mar 30 '20 at 10:49
  • You have no click event processing function in your code, like in example: map.on('click', function(evt) { ….. Have you tried that?
    – TomazicM
    Mar 30 '20 at 11:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.