2. PHPRunner General questions
  3. add layer on custom openstreetmap
This topic is locked

add layer on custom openstreetmap

 		6/2/2021 12:03:14 PM
PHPRunner General questions
O
 Omar Maiga author

Hello
I am using custom map to display openstreetmap. I would like to know how to add another shapefile on openstreetmap as a basemap
Thank you
admin 6/2/2021

Maybe this plugin can help?
Dalkeith 6/2/2021

This is not necessarily a simple thing to do and you might have to have a map server. Leaflet has plugins one of which will display a layer over your open layers basemap.

https://github.com/Flexberry/Leaflet-WFST

Note that digital mapping isn't really really part of phprunner.
O
 		Omar Maiga author 6/3/2021

Hello
I would like to know if it is possible to overlay the attached shape file on the custom open street map which is in phprunner (see the attached images)
img alt

img alt
Can someone give me his email so that I send him the shapefile.
HJB 6/3/2021

Overlay example for leaflet.js

... for inspiration purposes only ...

P.S. PHPRunner DashBoard Map Live Demo

Though last works of mine on a map like that date back to 2014, AFAIR it is possible to place total 5 different icons per map location
to even more visually classify the map location PLUS not to forget, the tabled content on list opening times of eg. restaurant in mind,
(1st icon), out-doors delivery (2nd icon), event location (3rd icon) etc pp. In other words, I personally would prefer the inhouse solution
provided by PHPRunner (the best code generator on this planet ;-) as, of course with some deeper manual coding, the results can
reach out to the users in a much more appreciated way, by help of ZOOMING IN- and OUT into the map to get the data table content
seen on the right to be updated (filtered) by mouse movements. Sure, when it comes to known display sizes of a smartphone, the
visualization of a map in junction with a data table is giving a space problem, yet did not want to miss to mention it here as an option
to run overlay works as it seems, the purpose is just to ADD some more "advertising" related map points in addition to what the basic
map is providing. Yet with smartphone display, sized 5.8 inch, and some finger touches on same, I can imagine, even such things can
create a "really nice and refreshing user experinces", espcially once the max of 5 customized icons per map location would be visible.
O
 		Omar Maiga author 6/4/2021

Overlay example for leaflet.js

... for inspiration purposes only ...

P.S. PHPRunner DashBoard Map Live Demo

Though last works of mine on a map like that date back to 2014, AFAIR it is possible to place total 5 different icons per map location
to even more visually classify the map location PLUS not to forget, the tabled content on list opening times of eg. restaurant in mind,
(1st icon), out-doors delivery (2nd icon), event location (3rd icon) etc pp. In other words, I personally would prefer the inhouse solution
provided by PHPRunner (the best code generator on this planet ;-) as, of course with some deeper manual coding, the results can
reach out to the users in a much more appreciated way, by help of ZOOMING IN- and OUT into the map to get the data table content
seen on the right to be updated (filtered) by mouse movements. Sure, when it comes to known display sizes of a smartphone, the
visualization of a map in junction with a data table is giving a space problem, yet did not want to miss to mention it here as an option
to run overlay works as it seems, the purpose is just to ADD some more "advertising" related map points in addition to what the basic
map is providing. Yet with smartphone display, sized 5.8 inch, and some finger touches on same, I can imagine, even such things can
create a "really nice and refreshing user experinces", espcially once the max of 5 customized icons per map location would be visible.

Hello
How did you do that. that's exactly what I'm asking for.
do you have a guide to do it. can we correspond by email
HJB 6/5/2021

Creating Dashboards

... you need first to understand on how DASHBOARDS are made, in this our case,
DASHBOARD MAPS ...,drill down to MAPS inside the a.m. URL content until you see:

img alt

to then enter the parametres. In regard to, citing excerpt out of the URL content above:

Marker icon. You can select and use custom marker icons instead of the default ones.
Alternatively, you can use the PHP expression option to set the custom icons.

we would need the kind assistance by the ADMIN when it comes to the need of up to
max 5 different and customized icons per map location.

Live Demo - Download

Above 43 MB download file contains (among others) the project file for the DASHBOARD MAP, so,
this way, you can give the project file a deeper look how it was done,

Hope, all this can help you to let you successfully find your way ...
fhumanes 6/13/2021

Hello,

The problem has been resolved.

I do not publish the solution because the layers are from Omar and I have not requested permission for the publication of the example.

If anyone has a similar problem and has the layers, you can contact[ fernandohumanes@gmail.com](mailto: fernandohumanes@gmail.com) and explain how we have done it.

Greetings,

fernando
HJB 6/13/2021

Interesting to see that OMAR never replied, but a third party is flagging the victory flag here now.
So, some people like spend time and energy to pave the way while others sneak away with it.
I definitely need to immediately wake up in regard to my future postings and my invested time.
Finally, declaring things to be even a secret somehow smells strongly, moreover the demo project
file provided by the Xlinesoft developers is more than self-explanatory on how to do it.

... this forum seems now to be on a turn from "support" to "commercial" place at the expense
of the developers who provided the live demo and its download FREE OF CHARGE.
O
 		Omar Maiga author 6/16/2021

No that's not what you think. I am a man of the field. I have spent most of my time traveling the villages for 3 years, which leaves me little time for my passions. This does not relieve me of my silence. I never participate in a forum. I am simply looking for the solution on the internet. And there I realize that I am in a family that I have to respect and that I respect. I beg your pardon for my silence.
HJB. I am very grateful to you for the live demo. currently I integrate it into my project.
Fhumanes has been of great help to me. I had to give him some pretty confidential data so that he understood the purpose of the work. I sincerely thank him for that. Currently I am communicating with the developer team to further improve the project. Excuse me again for this error which is really unintentional.
fhumanes 6/16/2021

Hello HJB,

Or I have not explained myself well, or it has been wrong. Always, in all my collaborations, in addition to putting a URL so that the solution can be evaluated, it facilitated the source code so that you can deploy it to your PCs.

On this occasion, I could not do it because the example has personal data that had not requested authorization for the publication of them.

All my collaborations (I think many of the developers of this forum know me) are free and there is never commercial transaction in them.

I am an admirer and follower of the Open Source, that spirit is the one who guides me in my actions.

I will facilitate the Special Code that I have used in the solution I offered to Omar and that part of a solution that previously publishes and that was a consequence of aid to a Paraguay developer. https://fhumanes.com/blog/guias-desarrollo/guia-6-phprunner-indicar-direccion-a-traves-de-una-mapa/

Greetings,
fernando
fhumanes 6/16/2021

# Solution I have applied.

Appearance of the List page and page View:

img alt

img alt

I used the library https://leafletjs.com/, to solve the problem.

It facilitated the code that I have used, indicating in the event where I have put it.

If you have published in the forum, you will know that it is difficult to put the code in nice style. I do not know how to do better.

Event After Application Initialized, It is to dynamically load the libraries and style sheets of the maps.

// Paras utilizar los mapas en Open Street Map
global $customjscript;
$customjscript ='';

// if ($requestTable == 'coordonnees') {
$customjscript = <<<EOT
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="layers/BD_ZS_speculation_1.js"></script>
<script src="layers/centroide_perimetre_3.js"></script>
<script src="layers/Perimetre_2.js"></script>

EOT;

// }

In header of the pages I have put:

<?php
global $customjscript;
echo $customjscript;
?>

On the LIST page, to represent the Map in the "map" field I encoded the event list page: before record processed:

$lat = $data['Latitude'];
$lon = $data['longitude'];
$id = $data['id'];
$text1 = $data['ID_PAP'];
$text2 = $data['Ilot'];
$name = "PAP: $text1
Ilot: $text2";
$data['map'] = <<<EOT
<style>
#map_$id {
width: 400px;
height: 250px;
}
</style>
<div id="map_$id"></div>
<script>
var map = L.map('map_$id').setView([$lat, $lon], 16);

L.geoJSON(json_BD_ZS_speculation_1).addTo(map);
L.geoJSON(json_Perimetre_2).addTo(map);

L.tileLayer('https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=94638&image=3&table=forumreplies', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'>https://www.openstreetmap.org/copyright">OpenStreetMap</a>; contributors'
}).addTo(map);
L.marker([$lat, $lon]).addTo(map)
.bindPopup('$name')
.openPopup();
</script>

EOT;

return true;

The specific code to add the layers in JSON format are:

L.geoJSON(json_BD_ZS_speculation_1).addTo(map);
L.geoJSON(json_Perimetre_2).addTo(map);

Similarly, on View pages, the event is used Process Record Values:

$lat = $values['Latitude'];
$lon = $values['longitude'];
$id = $values['id'];
$text1 = $values['ID_PAP'];
$text2 = $values['Ilot'];
$name = "PAP: $text1
Ilot: $text2";
$values['map'] = <<<EOT
<style>
#map_$id {
width: 800px;
height: 500px;
}
</style>
<div id="map_$id"></div>
<script>
var map = L.map('map_$id').setView([$lat, $lon], 16);

L.geoJSON(json_BD_ZS_speculation_1).addTo(map);
L.geoJSON(json_Perimetre_2).addTo(map);

L.tileLayer('https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=94638&image=4&table=forumreplies', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'>https://www.openstreetmap.org/copyright">OpenStreetMap</a>; contributors'
}).addTo(map);
L.marker([$lat, $lon]).addTo(map)
.bindPopup('$name')
.openPopup();
</script>

EOT;

return true;

And that's it.

Greetings,
fernando
HJB 6/16/2021

img alt

Above is a screenshot on how Bulgarians did it. Say, they collected 4 (four) GPS points to define a plot of land, added further
specific info on per plot basis and finally their software had been using the 4 GPS points to automatically calculate the plot size,
to draw same and finally to display it in a Google map.

As for me, this is the only productive way to go here as such approach would make tedious overlay creation to become obsolete.

From works of mine years ago to combat the Fall Army Worm pest in Africa, using air drones from China which use such 4 GPS
points based map to full automatically navigate the agro drone (without any human manual intervention) while spraying the acre,
I tied with a company in Germany by then which offers a complete range of features, including automatic GPS point collection, by
means of a smartphone app which can easily designed that way, owner's name, ID #, etc pp by means of entry fields which can be
easily added into the form, at a cost monthly cost of €169 for the admin access, and monthly €26 per user. After the form in the
smartphone is filled, the data set incl. GPS points is then sent to the server Germany by one finger touch on the SEND button
to finally end up in a downloadable Excel file format for the admin for further data processing.

P.S. @Omar - FYI, I just tasked an ultimate Excel Data into Maps Expert to bring his expertise, say, as the data collection side
is solved by smartphone app, centralized in a Hanover, Germany, server, the then downloadable Excel table with 4 GPS points
just needs a final step to via Excel formula and map integration to then forever get rid of the tedious overlay issues at all. By the
way,I have a low cost home project in Africa on a larger scale, so, I have own interest in such a time saving solution too.

Update 18th Jun 2021 - Excel Data Mapping experts signaled by today, they have a solution which even supercedes the basic
requirement after I showed them a scene in a Youtube video dated 2013.