Open-event-frontend: Switch to OpenStreetMaps or MapBox depending on the key provided at runtime
Maps functionality should work with OSM or MapBox depending on the key provided at runtime.
Parent Issue: #3563
See Also: #591
iamareebjamal
All 14 comments
@iamareebjamal I was thinking to implement a toggle for the following in the Admin panel. How does that sound?
kushthedude
on 18 Nov 2019
First fields need to be added in settings and a field to select which one is enabled
iamareebjamal
on 18 Nov 2019
Yes, thats what I am thinking in place of checking the key provided at
runtime.
On Mon, 18 Nov, 2019, 18:37 Areeb Jamal, notifications@github.com wrote:
First fields need to be added in settings and a field to select which one
is enabled—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/fossasia/open-event-frontend/issues/3564?email_source=notifications&email_token=AKQMTLW7OX4NYKXRS6EDOV3QUKHSXA5CNFSM4JBJQGI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEKL2KI#issuecomment-555007273,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AKQMTLQ2VWZ34QLD5AJLWL3QUKHSXANCNFSM4JBJQGIQ
.
kushthedude
on 19 Nov 2019
environment variables as they are used right now
iamareebjamal
on 19 Nov 2019
Below you can see the whole code required to create a map, position it, place a marker and create a popup with the office address.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>
<body>
<div id="mapDiv" style="width: 800px; height: 500px"></div>
<script>
// position we will use later
var lat = 40.73;
var lon = -74.00;
// initialize map
map = L.map('mapDiv').setView([lat, lon], 13);
// set map tiles source
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
// add marker to the map
marker = L.marker([lat, lon]).addTo(map);
// add popup to the marker
marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
</script>
</body>
</html>
I used the Leaflet library to handle map displaying. In the example above, in the head section, I used the hosted version of the CSS and JS files, but you can download it on your server and host locally. In the body section, you can see the div element of id “mapDiv” which is configured to be 800 pixels wide and 500 pixels high.
The rest of the magic is simply placed in the script. At first, we are setting the latitude and longitude of the point we want to put the marker on (and this will be also the center of our map). Next, we are creating the map, which will be placed in our “mapDiv” element, centered on the position we have chosen and zoomed to level 13. You can change the zoom level to better fit your needs.
The important thing is the map source configuration. There are various map sources you can use, but in this example, I want to keep things straight so I simply configured OpenStreetMap tiles as the source. Please note that you have to keep copyright information in such a case.
We almost finished. Now we can place the marker on the map (on the latitude and longitude configured before). As the last step, we are placing the popup with the information about our company.
TeAmP0is0N
on 1 Dec 2019
Please check how to use with Ember the above code is crude html and ajax.
Also we are not using any external script in our complete web app.
On Sun, 1 Dec, 2019, 14:58 Rohit Singh Rathaur, notifications@github.com
wrote:
Below you can see the whole code required to create a map, position it,
place a marker and create a popup with the office address.
I used the (Leaflet library)[https://leafletjs.com/] to handle map
displaying. In the example above, in the head section, I used the hosted
version of the CSS and JS files, but you can download it on your server and
host locally. In the body section, you can see the div element of id
“mapDiv” which is configured to be 800 pixels wide and 500 pixels high.
The rest of the magic is simply placed in the script. At first, we are
setting the latitude and longitude of the point we want to put the marker
on (and this will be also the center of our map). Next, we are creating the
map, which will be placed in our “mapDiv” element, centered on the position
we have chosen and zoomed to level 13. You can change the zoom level to
better fit your needs.
The important thing is the map source configuration. There are various map
sources you can use, but in this example, I want to keep things straight so
I simply configured OpenStreetMap tiles as the source. Please note that you
have to keep copyright information in such a case.
We almost finished. Now we can place the marker on the map (on the
latitude and longitude configured before). As the last step, we are placing
the popup with the information about our company.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/fossasia/open-event-frontend/issues/3564?email_source=notifications&email_token=AKQMTLS45XTLIXD7E4VDDBDQWN7T7A5CNFSM4JBJQGI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFRCYJA#issuecomment-560081956,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AKQMTLVJHFRSRLKQUDCG26DQWN7T7ANCNFSM4JBJQGIQ
.
kushthedude
on 1 Dec 2019
@kushthedude so, we can't use any external library. ie. leaflet?
TeAmP0is0N
on 1 Dec 2019
We can, but we don't need interactive maps, just a static map with a marker. If it can be done without an entire library, it'd be preferred.
iamareebjamal
on 1 Dec 2019
@iamareebjamal For the current version I am thinking to remove the ember-g-map and use Open Street Map for the current version. Later we can restore google map with much lighter add-on than ember-g
-mapas it is a bulky, verbose wrapper that reimplements the entire Google Maps API.
kushthedude
on 25 Dec 2019
Sure, I agree, see which is better OSM or MapBox
iamareebjamal
on 25 Dec 2019
https://miguelcobain.github.io/ember-leaflet/docs/adding-layers
Supports both OSM and MapBox. MapBox WebGL is cheaper than layers aproach, but OSM is free. So, better option is to go for leaflet first and add MapBox WebGL if it is not enough
iamareebjamal
on 26 Dec 2019
Above package is quite heavy, was looking for some other alternatives.
On Thu, 26 Dec, 2019, 23:28 Prateek Jain, notifications@github.com wrote:
@kushthedude https://github.com/kushthedude Sure. Go ahead.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/fossasia/open-event-frontend/issues/3564?email_source=notifications&email_token=AKQMTLU6D6TER7HSFJK2LG3Q2TWFRA5CNFSM4JBJQGI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHV5GUY#issuecomment-569103187,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AKQMTLVC4DYKW72PCT3S5H3Q2TWFRANCNFSM4JBJQGIQ
.
kushthedude
on 26 Dec 2019
How did you find out it's "quite heavy"? What is its size? Leaflet is the easiest way to use OSM. And we need this issue solved ASAP. Use this and then iterate to improve the solution.
iamareebjamal
on 27 Dec 2019
Closing this in favor of more detailed new issues.
mariobehling
on 28 Nov 2020
Related issues
hpdang
·
6Comments
harsh-jindal
·
5Comments
mariobehling
·
5Comments
dilpreetsio
·
4Comments
dilpreetsio
·
4Comments
Most helpful comment
Please check how to use with Ember the above code is crude html and ajax.
Also we are not using any external script in our complete web app.
On Sun, 1 Dec, 2019, 14:58 Rohit Singh Rathaur, notifications@github.com
wrote: