Reputation: 424

how to show some markers on a static image using openlayers 3

I am trying to show some marker on the static image ie

Given a static image of certain size in feet and set of point in feets how mark some image or a marker on the static image using openlayers3

I understand we have a provision in openlayer3 to use the static image as the base layer of the map

I am not getting how to show the marker on the static image(base layer)for given certain plots on the image

Any help would be more thank you please suggest a war to do it

I am show the static image as the map as shown below

<!DOCTYPE html>
<html>
<head>
    <title>Static image 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 class="container-fluid">

    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>

</div>
<script>
    // 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, 1024, 968];
    var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    attributions: [
                        new ol.Attribution({
                            html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
                        })
                    ],
                    url: 'colorful-triangles-background.jpg',
                    projection: projection,
                    imageExtent: extent
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            projection: projection,
            center: ol.extent.getCenter(extent),
            zoom: 2
        })
    });

</script>
</body>
</html>

But i have no idea how to plot the markers the plots are json given to plot is some thing like below

[{ x:1.234, y:3.34, units:feet }, { x:2.234, y:4.34, units:feet }, { x:7.234, y:9.34, units:feet }]

Upvotes: 1

Answers (1)

Rakesh Guranani

Reputation: 552

Create an Icon Style
Create Icon Feature
Setup a New Vector layer with vector source
Add the vector layer in Map's layer
I have displayed the marker on click of the map at mouse position, you can add markers on the event you want

Also since I did not have the images you were referring I have referred the open layer examples image.

<!DOCTYPE html>
<html>
<head>
    <title>Static image 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 class="container-fluid">

<div class="row-fluid">
<div class="span12">
    <div id="map" class="map"></div>
</div>
</div>
</div>
<script>
    // 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, 1024, 968];
    var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });


var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [15, 24],
        size: [32, 48],
        anchorXUnits: 'pixels',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'http://www2.psd100.com/ppp/2013/11/0501/Map-marker-icon-1105213652.png'
    }))
});


//Create a Feature
 var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([72.5800, 23.0300])

    });

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

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

iconFeature.setStyle(iconStyle);


var map = new ol.Map({
layers: [
    new ol.layer.Image({
        source: new ol.source.ImageStatic({
            attributions: [
                new ol.Attribution({
                    html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
                })
            ],
            url: 'http://imgs.xkcd.com/comics/online_communities.png',
            projection: projection,
            imageExtent: extent
        })
    }), vectorLayer //Add Vector in layers
],
target: 'map',
view: new ol.View({
    projection: projection,
    center: ol.extent.getCenter(extent),
    zoom: 2
})
});

//On Map click setup marker
 map.on('click', function (evt) {

    var feature = new ol.Feature(new ol.geom.Point(evt.coordinate));
    feature.setStyle(iconStyle);
    vectorSource.clear();
    vectorSource.addFeature(feature);
    selectedlong = evt.coordinate[0];
    selectedlat = evt.coordinate[1];

});

</script>
</body>
</html>

Upvotes: 5

how to show some markers on a static image using openlayers 3

Answers (1)

Related Questions