Forum | Appery.io

How did you get this to work? I'm trying to add a basic Leaflet map to my app, but when I create an HTML element with the simple map div then the map tiles don't load in the right place (something to do with placements of the div I expect).

I've tried using the DIV creted by Appery when you add a HTML element, and this works well, but it leaves scrollbars. I cannot figure out how to overwrite Appery's "overflow=auto" style.

Please bear in mind that my HTML/CSS skills are near enough zero.

Oh, I got it working. I went for the second option (using the DIV created by appery as I found out about the !important property in CSS).

Here are my steps. I expect an web developer will say that I've done it all wrong, but it works for me

How to add a leaflet based map to Appery IO:

1. Add the Leaflet.js URL (http://cdn.leafletjs.com/leaflet-0.5....) to app settings "External Resources". By following instructions at:
   http://docs.appery.io/documentation/a...

2. Add the Leaflet CSS using "Create New-CSS". Create from URL (http://cdn.leafletjs.com/leaflet-0.5....) Note that for some reason this didn't work for me. So I copied the content from leaflet.css and pasted it a "Create New-CSS Source=Bank" instead.

3. Create an HTML element in you app (selecting DIV from the drop down type menu). Make a note of the elements "name" value. Also note down the PageName that you added the HTML element to.

4. Create another CSS, this time paste in the following (where PageName_HTMLName is the Appery page name, plus "_", plus the element name noted down in step 3):

   codediv.PageName_HTMLName {
   overflow: hidden !important;
   }/code

5. Add the Javascript event for page load (again replacing PageName_HTMLName with the Appery page name, plus "_", plus the element name noted down in step 3):

   codevar map = new L.Map('PageName_HTMLName', {
   center: new L.LatLng(51.505, -0.09),
   zoom: 13
   });
   //Add a base tile layer
   var tilesUrl = 'http://tile.openstreetmap.org/{z}/{x}/{y}.png',
   tiles = new L&#46;TileLayer(tilesUrl, {attribution:'&copy; <a href="http:&#47;&#47;osm&#46;org/copyright">OpenStreetMap</a> contributors'});
   map&#46;addLayer(tiles);/code