Leafletjs Mapping

Applications Blank
#1

Does anyone have any good step by step examples on how to integrate leafletjs in to scriptcase?

#2

Take point or show the points?
I took the points and I am doing the sample now, I want to do it through a cluster, I’ll see what comes out …
You must make the library and then load the map in the onload. That’s all, the documentation is in leaftlet.

#3

Hi @ddiaz , I have not dug back into this. But do you happen to have a sample of the code from your end of scriptcase in the onload? For some reason i just get stumped with maps.

thank you

#4

Hi @ddiaz , I have jumped back on this. I am using a blank application at the moment. I am able to get all my markers but not the tiles for the maps. I have gone back to basics to verify that it works. Using a regular old php file outside of scritpcase i can get the tiles to appear and a marker no problem. once i go back into script case i loose the tiles. If I past the same code that i use in my php file with in the blank app i can not get the map to generate. Any thoughts?

?> OpenStreetMap Example <?php // Set the latitude and longitude of the location you want to display $lat = 51.5074; $lon = -0.1278; // Set the zoom level $zoom = 13; ?> 
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
  var map = L.map('map').setView([<?php echo $lat; ?>, <?php echo $lon; ?>], <?php echo $zoom; ?>);
	 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    maxZoom: 18,
  }).addTo(map);
  L.marker([<?php echo $lat; ?>, <?php echo $lon; ?>]).addTo(map);
</script>
<?php all my points [details="Summary"] [[url=https://postimg.cc/s1YXcp2c][img]https://i.postimg.cc/s1YXcp2c/Screenshot-2023-04-14-151157.png[/img][/url]](https://forum.scriptcase.net/t/deploy-problem-on-shared-hosting-without-domain-pointed-while-under-development/23613) [/details]
#5

Hi, @jbmcclain, I’m at the exact same situation: when trying to get the tiles from a blank app in scriptcase, there’s a 400 error. Did you succeded getting the tiles?

#6

Hi @tfertil ,
In short yes. I will do a write up. It’s a little different than the examples . The variables used contine to break even when replacing them. I am not in front of the computer. But will be submitting a write up on it soon.

#7

Good morning all, If you are looking for a replacement for google maps. Then here you go. the below link has the libraires you need to get started as well as code example to make it work with a blank application.
In the Zip file you will have a a txt file. Use that file for the php code in a blank app. Upload the leafet directory into the external libraires. Change your $sql query to meet your needs.

3 Likes
#8

thank u , it help me a lot

#9

If you want to capture the geographical position in a form in two fields (from database)
{latitud}
{longitud}
and move the marker

Create a field called
{mapa}

and in the onLoad event paste the following code

if({Latitud} == "" || {Longitud} == ""){
	{Latitud} = 4.76;
	{Longitud} = -74;
}

{Mapa} = '
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<div id="map" style="height: 500px; width: 100%;"></div>'."
<script>
  // Inicializar el mapa
  var map = L.map('map', {attributionControl: false}).setView([".{Latitud}.", ".{Longitud}."], 15); // Coordenadas iniciales (ej: Bogotá)
  
  L.tileLayer('https://\{s\}.tile.osm.org/\{z\}/\{x\}/\{y\}.png', {
            }).addTo(map);

  // Crear un marcador
  var marker = L.marker([".{Latitud}.", ".{Longitud}."], { draggable: true }).addTo(map);

  // Actualizar campos de latitud y longitud al mover el marcador
  marker.on('dragend', function (e) {
    var latLng = marker.getLatLng();
    document.getElementById('id_sc_field_latitud').value = latLng.lat.toFixed(6);
    document.getElementById('id_sc_field_longitud').value = latLng.lng.toFixed(6);
  });

  // Opcional: Permitir al usuario hacer clic en el mapa para mover el marcador
  map.on('click', function (e) {
    marker.setLatLng(e.latlng);
    document.getElementById('id_sc_field_latitud').value = e.latlng.lat.toFixed(6);
    document.getElementById('id_sc_field_longitud').value = e.latlng.lng.toFixed(6);
  });
</script>
";

image
image1104×569 307 KB