Create and publish an interactive map without programming code
2 min readJul 3, 2024
Thanks to the free embedMap web application (by owlapps.net) it is possible to create and publish an interactive map based on Leaflet and KML (Keyhole Markup Language) without the need for programming code.
You only need to know HTML and KML to format your text and geographic objects.
Example of map settings (several ways to display arrows):
<script
onerror = "window.location.href='http://www.owlapps.net/modules/owlapps_apps/embedmap'"
src = 'https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js'
language="javascript"
defer>
</script>
<div data-owlappsmaplyrgroup = "yes">
<iframe name="Displaying arrows on the map" style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes"
data-owlappscss= ' {
"internal" :
"
.rotateimgpoint {
transform:translate(-50%, -50%) rotate(175deg) !important;
}
"
}'
>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<Placemark>
<name> Target</name>
<Style>
<IconStyle>
<Icon>
<href>
<![CDATA[
https://www.owlapps.net/modules/owlapps_apps/embedmap/img/greenpoint.png
]]>
</href>
</Icon>
<scale> 2 </scale>
<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
</IconStyle>
</Style>
<Point>
<coordinates>
2.33935,48.85777
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>
Point-type geometry displays an arrow
</name>
<Style>
<IconStyle>
<richDecos>
<img>
<url>
<![CDATA[
https://www.owlapps.net/modules/owlapps_apps/embedmap/img/arrowcenter.png
]]>
</url>
<pixelSize>
200px
</pixelSize>
<className>
rotateimgpoint
</className>
</img>
</richDecos>
<scale> 0 </scale>
</IconStyle>
</Style>
<Point>
<coordinates>
2.34508345748226,48.85809381479696
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>
Displaying a line-type geometry arrow head
</name>
<Style>
<LineStyle>
<color>
FFcd12ff
</color>
<width>
4
</width>
<richDecos>
<img>
<url>
<![CDATA[
https://www.owlapps.net/modules/owlapps_apps/embedmap/img/arrowhead.jpg
]]>
</url>
<rotate>
true
</rotate>
<pixelSize>
4em
</pixelSize>
<offSet>
100%
</offSet>
<repeat>
100%
</repeat>
</img>
</richDecos>
</LineStyle>
</Style>
<LineString>
<coordinates>
2.331165539511821,48.85378549010994 2.337345465321932,48.85668483712807
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>
HTML upward arrow
</name>
<Snippet>
<![CDATA[
Using the HTML upward arrow: <a target="_blank" href="https://www.htmlsymbols.xyz/unicode/U+2191" >https://www.htmlsymbols.xyz/unicode/U+2191</a>
]]>
</Snippet>
<Style>
<LineStyle>
<color>
00000000
</color>
<width>
0
</width>
<richDecos>
<raw>
<repeat>
80px;
</repeat>
<content>
<![CDATA[
<span style="font-size:7em; color: red;" > ↑ </span>
]]>
</content>
<rotate>
true
</rotate>
</raw>
</richDecos>
</LineStyle>
</Style>
<LineString>
<coordinates>
2.335761830958047,48.86310719113639 2.338871933356745,48.85846311841082
</coordinates>
</LineString>
</Placemark>
<GroundOverlay>
<name>
GroundOverlay tag displays an arrow
</name>
<Icon>
<href>
<![CDATA[
https://www.owlapps.net/modules/owlapps_apps/embedmap/img/redarrow.png
]]>
</href>
</Icon>
<LatLonBox>
<north> 48.85582666913463 </north>
<south> 48.85116036635507 </south>
<east> 2.348090623990567 </east>
<west> 2.336495846286845 </west>
<rotation>
118.7484817504883
</rotation>
</LatLonBox>
</GroundOverlay>
</Document>
</kml>
</iframe>
</div>Live demo: https://www.owlapps.net/modules/owlapps_apps/embedmap/testarrow.html
Video demo:
Ohter videos: https://www.youtube.com/watch?v=1FPsAZolsHs&list=PL8cYCpbdDT9bX5SRsULbgfnigHaXxOGZx&index=5