pinpoint multiple locations on the map using geo.admin.ch

76 views
Skip to first unread message

Subha P

unread,
Oct 22, 2021, 11:23:11 AM10/22/21
to GeoAdminCh API
Hi,

I am looking for a way to pinpoint multiple locations on the map using geo.admin.ch in my webpage.
I have tried using the below link and I can see the map alone. But I need to set multiple locations in the script and it should show on the map with the marker.

Please suggest some ideas to achieve the above requirement.
Thanks in advance. I am waiting for your reply.




Thanks,
Subha P.

David Oesch

unread,
Oct 22, 2021, 1:02:19 PM10/22/21
to geoadm...@googlegroups.com
You can either add all your data in a kml File
And import it into the viewer 
And from there use it as iFrame 

Or use an api approach Uefa



--
You received this message because you are subscribed to the Google Groups "GeoAdminCh API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geoadmin-api...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geoadmin-api/65cac795-5629-4422-8b88-b4e87ed4d1f5n%40googlegroups.com.

Subha P

unread,
Oct 23, 2021, 2:33:22 PM10/23/21
to geoadm...@googlegroups.com
Hi,
I have to display a map on my webpage (php) and have to point multiple locations on the map. Is there any example API which suits my requirement?
I have checked the link below and there is no example to point multiple locations over the map.
Please suggest some ideas to implement.


Thanks,
Subha P.

You received this message because you are subscribed to a topic in the Google Groups "GeoAdminCh API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/geoadmin-api/hwGwI3glrjU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to geoadmin-api...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geoadmin-api/CAE7nro0WtUZKj8NR4DzFM4SEv1hh%2BPjuJz-mctiXTV5U7v1ozg%40mail.gmail.com.


--
Thanks & Regards,
Subha Padmanaban

David...@swisstopo.ch

unread,
Oct 25, 2021, 2:47:24 AM10/25/21
to geoadm...@googlegroups.com

Subha P

unread,
Oct 28, 2021, 2:16:46 PM10/28/21
to geoadm...@googlegroups.com
HI,
Thanks for your reply,
I have pasted my code below, In that I have mentioned the longitude and latitude in ol.geom.point (geometry: new ol.geom.Point([709136, 270186]),)
I have to set markers on multiple places using the longitude and latitude, But the code is not working. Could you please tell me what I have missed?
I just got the marker in the center of the page, and when I zoom,  the map displays without a marker.

Reference links

Code begins
__________
<html>
<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  </head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" src="https://api3.geo.admin.ch/loader.js?version=4.4.2"></script>
<div id="map"></div>
<style type="text/css">
     #map {
       width:100%;
       height:100%;
     }
     .element {
       background-color: white;
       padding-left: 8px;
       padding-bottom: 8px;
       padding-top: 8px;
       width: 220px;
       color: #555;
       font: 11px tahoma,arial,verdana,sans-serif;:wq
     }
     .title {
       margin-top: -4px;
       font-weight: bold;
     }
     .undertitle {
       font-style: normal;
       margin-bottom: -3px;
       margin-top: -5px;
     }
     .middle {
       margin-top: -9px;
       }
     .close {
       cursor: pointer;
       text-decoration: none;
       position: absolute;
       top: 2px;
       right: 8px;
       font-size: larger;
       font-weight: bold;
     }
</style>
<!--load api3 and set language-->
<script type="text/javascript">
<!--//Create a GeoAdmin Map-->
var map = new ga.Map({
<!--// Define the div where the map is placed-->
 target: 'map',
<!--// Create a view-->
   view: new ol.View({
<!--// 10 means that one pixel is 10m width and height-->
<!--// List of resolution of the WMTS layers:-->
<!--// 650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1, 0.5, 0.25, 0.1-->
   resolution: 5,
<!--// Define a coordinate CH1903 (EPSG:21781) for the center of the view-->
   center: [709136, 270186]
 })
});
<!--// Create a background layer-->
var lyr1 = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
var iconFeature = new ol.Feature({
 geometry: new ol.geom.Point([709136, 270186]),
 name: 'Null Island',
 population: 4000,
 rainfall: 500
});
var iconStyle = new ol.style.Style({
 image: new ol.style.Icon({
   anchor: [0.5, 0.5],
   anchorXUnits: 'fraction',
   anchorYUnits: 'fraction',
   src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oLCAwhG8L1qXwAAAJ1SURBVDjLTZPBThRBEIa/6uleYtDVA8QHUGIw4ehVb3Ii+AK+guGid696Ud/AN4BAiFw9ePUAbmK4SIAo7OxuZtnZmZ7umfLQED1U0of6qur/q1oA9PgYWVlBBwNHCGt4v8Ws3GRa9BmPoSimDIc7jEYfqOtD+fw56MYGsruL6GCAPH6Mqjq+f9+jbZ9T1zArYVoo4zFMJsJoBMMh5PkBT55syNu3QZ89QwD07MxxcjJBZJEQFGME7+H8HC4vIc+5LqSMRsJsVuDcsnz7Fozu7zuOjvYoy0WKqeKccP8+3LkDvoHJJEVRwHQqVJVydXWXP392dXXVWcpyjbZ9DiggGIGmgdNTOPkFFxc3MMxmUJaCb5TQrBPCmmU43AKg64QQElhVMBrDZJzgsryBoaohBiFGEHllyfNNOoW2BV9DNU8G3gBlCfM51HWCQ4BOQQxo98Ly+3cfa5UQJCVVCZjP07uuUzQNhAhdB5kBI4qau5Y8hyxLlb3/B3gPtU9gDBDbZJPNQIRr2Viqaor3fWJMyU2T3G8aaGOS1ikYAZOBMSlAiLGwVNUOV1cvaVuIMU0S22uwTbvJDFgLCwsJjhFUQXXbEOMHQoC6VrxPBdr4H5wl8N49WFqC27eh11NcD5z7ZFjoHaJ6QIhCjErbpe4qSa+zcOsWLC4mCaqKdYK1X/D1YTrlN68de/s51byPqoIImUnde700Qa8HoIgIIRT8OFqWeRWMrq8j794HHj1YQuQA1XSNxkCWKSJK26YVqgqdfuHnz2WZV0EfPrz+TE+fIl+/oqurDu/XMGYLkU2c62MtwJQs28aYj1TVoQwGQVdWkONj/gL3ho+XUT2DTgAAAABJRU5ErkJggg=='
 })
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
 features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
 source: vectorSource
});
<!--//Create an overlay layer-->
var element = document.createElement('div'); // is a node
element.classList.add('element');
element.innerHTML = '<div class="title"<h3>Kdo FU Waffenplätze</h3></div>' +
   '<div class="undertitle">' +
     '<br>Kaserne Auenfeld<br>' +
     '<div class="middle">' +
       '<br>8500 Frauenfeld<br>' +
     '</div>' +
   '</div>' +
   '<div class="close">' +
     '<div type="button" onclick="window.toggle()"<span aria-hidden="true">X</span></div>' +
   '</div>';

var popup = new ol.Overlay({
 position: map.getView().getCenter(),
 positioning:'centre-center',
 element: element,
});
          function toggle() {
 $(".element").toggle();
}
<!--// Add the layers in the map-->
map.addLayer(lyr1);
map.addLayer(vectorLayer);
map.addOverlay(popup);
</script>
 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
 </body>
 </html>

Screenshot from 2021-10-28 22-37-09.png

Subha P

unread,
Oct 29, 2021, 8:03:39 AM10/29/21
to geoadm...@googlegroups.com
Hi,
Is there any API in geo.admin.ch to get latitude and longitude for the given address, I have to send the address as a request and I need the latitude and longitude for the addresses and have to create a map with it.
Please reply.

David Oesch

unread,
Oct 29, 2021, 8:44:16 AM10/29/21
to geoadm...@googlegroups.com

Subha P

unread,
Oct 29, 2021, 1:01:00 PM10/29/21
to geoadm...@googlegroups.com
HI,
Thanks for your reply.
As you have suggested I checked the examples and tried out the below api


I got lon and lat values,
But when I use the lon and lat values in my script, it is not located in the map.

var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
var map = new ga.Map({
  target: 'map',
  layers: [layer],
  view: new ol.View({
    resolution: 650,
    center: [670000, 175000]
  })
});

// Create a feature

var iconFeature = new ol.Feature({
  geometry: new ol.geom.MultiPoint([[8.209860801696777,47.17700958251953]]).transform('EPSG:2056',map.getView().getProjection())
});

Could you please tell me why the lon and lat values retrieved from the api, is not worked with the above code. Am I missing something?

I am waiting for your reply, Thanks in advance.

Thanks,
Subha P.

Reply all
Reply to author
Forward
0 new messages