CIM37 - Update OSM to TSS Icons

This commit is contained in:
“VeLiTi”
2024-04-03 16:59:48 +02:00
parent b79a33b9dc
commit 2cb07cfd47
5 changed files with 114 additions and 9 deletions

View File

@@ -272,7 +272,7 @@ function template_footer($js_script = '') {
// DO NOT INDENT THE BELOW CODE
echo <<<EOT
</main>
<button id="support_btn" class="btn" style="opacity: 0.8;position: fixed;bottom: 23px;right: 28px;background:#4a79b400;font-size:36px;z-index:999;" onclick="openForm()"><img src="https://www.totalsafetysolutions.nl/assets/svg/tss-persoon.svg" alt="tss-persoon" height="115"></button>
<button id="support_btn" class="btn" style="opacity: 0.8;position: fixed;bottom: 23px;right: 28px;background:#4a79b400;font-size:36px;z-index:999;" onclick="openForm()"><img src="./assets/images/tss-persoon.svg" alt="tss-persoon" height="115"></button>
<div class="form-popup" id="request">$veliti_cim
<div class="close">
<button type="button" style="border: solid 1px;" onclick="closeForm()">X</button>

BIN
assets/images/EP.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

@@ -0,0 +1,87 @@
<svg xmlns="http://www.w3.org/2000/svg" width="141.214" height="276.409">
<g data-name="Group 611" transform="translate(-586.657 -166.295)">
<g data-name="Group 613">
<g data-name="Group 612">
<g data-name="Group 611">
<path fill="#005655" d="m724.828 340.527-26.552 2.053-5.5-48.355a16.346 16.346 0 0 1 .751-6.759c1.7-5.09 5.477-7.306 10.657-6.951 6.088.417 14.537 4.087 14.537 4.087Z" data-name="Path 1316"/>
</g>
</g>
</g>
<path fill="#fabaa0" d="m615.227 347.087-28.57 18.772.82-.539 27.355 19.417Z" data-name="Path 1317"/>
<path fill="#e2ff04" d="M627.672 277.163h60.409v50.09h-60.409z" data-name="Rectangle 319"/>
<path fill="#1d1d1b" d="M636.05 266.687h43.947v18.17H636.05z" data-name="Rectangle 320"/>
<path fill="#005655" d="m596.716 282.672-2.023 12.994 28.552-5.186-4.962-16.342Z" data-name="Path 1318"/>
<g data-name="Group 616">
<g data-name="Group 615">
<g data-name="Group 614">
<path fill="#005655" d="m589.7 340.527 26.552 2.053 5.5-48.355a16.345 16.345 0 0 0-.751-6.759c-1.7-5.09-5.5-6.316-10.657-6.951-7.286-.909-14.238 2.347-15.036 10.454Z" data-name="Path 1319"/>
</g>
</g>
</g>
<g data-name="Group 617">
<path fill="#e2ff04" d="m664.007 325.535 39.606 1.193 6.663-47.045-22.707-9.973-7.569-3.023-1.029 12.277c-.002 18.408-4.979 33.847-14.964 46.571Z" data-name="Path 1320"/>
<path fill="#e2ff04" d="m636.09 279.169-.075-12.845-4.555 2.328-27.184 11.318 6.236 39.709 1.843.036 26.68-.8h12.137c-8.742-5.615-15.082-21.338-15.082-39.746Z" data-name="Path 1321"/>
<path fill="#fff" d="M660.1 318.911c-2.214 1.421.713 2.2-1.746 2.2s-1-.783-3.212-2.2h-15.96l-26.68.8-1.918-.036.124 19.133 93.626-.647.291-18.061Z" data-name="Path 1322"/>
</g>
<path fill="#d86" d="M652.916 267.955h9.701v1.473h-9.701z" data-name="Rectangle 321"/>
<path fill="#005655" d="M699.924 392.59 659.2 419.331l-44.5-28.253-4.109-54.126 93.748-.756Z" data-name="Path 1323"/>
<path fill="#fabaa0" d="m589.7 340.527-3.043 25.332s20.433 4.766 20.51 3.788 5.769 2.537 5.769 2.537l-2.025-30.811" data-name="Path 1325"/>
<g data-name="Group 618">
<path fill="#e2ff04" d="m659.866 430.2-23.549-14.955v12.375l23.146 14.789.124.3.3-.125.168.069.07-.17 22.632-14.806v-12.241Z" data-name="Path 1326"/>
</g>
<g data-name="Group 620">
<path fill="#2fac66" d="m699.959 295.863-4.555 2.971v6.01l-8.089 8.138 3.221 3.24 9.294-9.351.128-.129v-10.88Z" data-name="Path 1327"/>
<g data-name="Group 619">
<path fill="#005655" d="M685.528 304.943v-4.492l-4.555-3.33v9.72l.071.072 9.414 9.388 3.221-3.24Z" data-name="Path 1328"/>
</g>
</g>
<g data-name="Group 621">
<path fill="#fff" d="m690.779 294.947-4.3-3.237v4.881l4.144 3.171.157.106.1-.078 8.873-5.84v-4.826Z" data-name="Path 1329"/>
</g>
<path fill="#fabaa0" d="m724.828 340.527 3.043 25.332s-20.433 4.766-20.51 3.788-5.769 2.537-5.769 2.537l2.025-30.811" data-name="Path 1330"/>
<path fill="#fabaa0" d="m644.109 355.154-.671 18.418 7.614 8.227 15.532-4.188 47.435 2.572 6.906.15 6.917-14.273-1.648-7.117-3.617-9.479-49.356 12.483-11.711-19.113-4.988 3.051 3.4 8.856-15.609.317Z" data-name="Path 1331"/>
<path fill="#706f6f" d="m673.219 361.949 30.213-7.855 15.324 8.637Z" data-name="Path 1332" opacity=".17" style="mix-blend-mode:multiply;isolation:isolate"/>
<g data-name="Group 624">
<g data-name="Group 622">
<path fill="#fabaa0" d="M675.326 254.73c-1.356 2.419-1.4 11.052-.193 16.637.493 2.285 2.565 10.161 3.473 10.791a72.879 72.879 0 0 1-20.877 3.112c-11.6 0-18.323-3.112-18.323-3.112.968-.671 3.071-8.744 3.568-11.248 1.109-5.587 1.032-13.826-.288-16.18Z" data-name="Path 1333"/>
</g>
<g data-name="Group 623" style="mix-blend-mode:multiply;isolation:isolate">
<path fill="#c6c6c6" d="M675.326 254.73c-1.356 2.419-1.4 11.052-.193 16.637-16.078 6.684-28.457-11.9-29.369-16.637Z" data-name="Path 1334"/>
</g>
</g>
<g data-name="Group 626">
<g data-name="Group 625">
<path fill="#005655" d="M682.54 224.828c6.25-3.715 7.3-16.767 5.16-21.915 1.711 1.716 5.774 1.716 7.271-.191-5.56-3.813-5.56-10.487-12.19-12.013 2.753.344 5.774-2.564 6.282-5.066-9.811-1.431-20.864-10.465-25.556-14.588-14.756-12.966-35.073 3.242-30.56 16.613-3.27-1.263-10.648-.214-6.157 10.464 1.258 2.993-2.419 7.628-6.269 8.962 2.353 1.145 3.636 2.289 7.7-1.144-3.208 5.34.56 11.437 2.644 14.224s2.864 3.831 8.333 6.036c10.609 4.28 37.093 2.333 43.342-1.382Z" data-name="Path 1335"/>
</g>
<path fill="#005655" d="M642.549 191.7c5.453.429 27.291-.335 31.557 2.288-4.812-9.153-11.589-17.239-23.515-18.49-10.407-1.15-10.381 10.463-8.042 16.202Z" data-name="Path 1336"/>
</g>
<g data-name="Group 628">
<path fill="#fabaa0" d="M632.709 215.247c-2.043-3.79-6.007-5.246-9.024-3.657-6.691 3.523-1.8 12.335.489 14.334 1.469 1.282 5.152 3.242 7.715 2.207 2.178-.88.82-12.884.82-12.884Z" data-name="Path 1337"/>
<g fill="#c6c6c6" data-name="Group 627">
<path d="M625.326 214.516c2.666-2.011 7.178 1.463 7.178 5.119-2.563-1.097-3.076-4.571-7.178-5.119Z" data-name="Path 1338" style="mix-blend-mode:multiply;isolation:isolate"/>
<path d="M631.272 219.671c-2.255-2.376-4.92 1.189-3.485 4.937-4.409-5.208.307-9.234 3.485-4.937Z" data-name="Path 1339" style="mix-blend-mode:multiply;isolation:isolate"/>
</g>
</g>
<g data-name="Group 630">
<path fill="#fabaa0" d="M684.121 215.247c2.044-3.79 6.008-5.246 9.025-3.657 6.69 3.523 1.8 12.335-.49 14.334-1.468 1.282-5.152 3.242-7.714 2.207-2.178-.88-.821-12.884-.821-12.884Z" data-name="Path 1340"/>
<g fill="#c6c6c6" data-name="Group 629">
<path d="M691.505 214.516c-2.666-2.011-7.178 1.463-7.178 5.119 2.563-1.097 3.073-4.571 7.178-5.119Z" data-name="Path 1341" style="mix-blend-mode:multiply;isolation:isolate"/>
<path d="M685.558 219.671c2.255-2.376 4.921 1.189 3.486 4.937 4.409-5.208-.308-9.234-3.486-4.937Z" data-name="Path 1342" style="mix-blend-mode:multiply;isolation:isolate"/>
</g>
</g>
<path fill="#fabaa0" d="M658.437 263.424c7.83-2.034 14.4-4.254 25.346-10.567 1.287-6.314 1.2-24.927 3.081-33.482-3.218-3.731-9.574-18.019-8.608-29.21-4.345-2.583-8.436-4.508-19.819-4.508-11.367 0-15.474 1.925-19.819 4.508.966 11.191-5.39 25.479-8.609 29.21 1.879 8.555 1.8 27.168 3.082 33.482 10.943 6.313 18.694 8.103 25.346 10.567Z" data-name="Path 1343"/>
<path fill="#c6c6c6" d="M665.537 248.645c-4.931 1.334-8.874 1.334-12.69-.668 1.988 4.376 9.81 5.088 12.69.668Z" data-name="Path 1344" opacity=".52" style="mix-blend-mode:multiply;isolation:isolate"/>
<path fill="#2fac66" d="M637.345 177.6c2.6-4.252 11.482-9.855 21.335 3.185 11.286 14.937 18.876 9.3 23.848 5.085-4.189.626-11.423-1.129-16.532-6.025-10.89-10.438-15.814-10.98-20.727-9.94s-6.469 3.524-7.924 7.695Z" data-name="Path 1345"/>
<path fill="#005655" d="m636.236 284.647 21.42 42.77L680 284.857v-15.551l-21.569 11.029-22.413-11.883" data-name="Path 1346"/>
<path fill="#c6c6c6" d="m658.632 247.192 13.669-8.469h-27.338Z" data-name="Path 1347" style="mix-blend-mode:multiply;isolation:isolate"/>
<rect width="3.428" height="9.524" fill="#005655" data-name="Rectangle 322" rx=".909" transform="translate(644.855 209.026)"/>
<rect width="3.428" height="9.524" fill="#005655" data-name="Rectangle 323" rx=".909" transform="translate(668.855 209.026)"/>
<path fill="#c6c6c6" d="m658.415 211.155-3.236 14.588-3.844 1.6 7.08 5.3 7.08-5.271-3.843-1.6Z" data-name="Path 1348" opacity=".44" style="mix-blend-mode:multiply;isolation:isolate"/>
<path fill="#005655" d="M653.722 205.688h-10.868a.857.857 0 0 1-.865-.849v-1.5a.857.857 0 0 1 .865-.848h10.868a.856.856 0 0 1 .864.848v1.5a.857.857 0 0 1-.864.849Z" data-name="Path 1349"/>
<path fill="#005655" d="M674.59 205.688h-10.867a.857.857 0 0 1-.865-.849v-1.5a.857.857 0 0 1 .865-.848h10.867a.857.857 0 0 1 .865.848v1.5a.857.857 0 0 1-.865.849Z" data-name="Path 1350"/>
<g data-name="Group 631" opacity=".19" style="mix-blend-mode:multiply;isolation:isolate">
<path d="M659.113 429.719v12.464l.35.224.124.3.3-.125.168.069.07-.17 22.632-14.806v-12.239L659.866 430.2Z" data-name="Path 1351"/>
<path d="m727.871 365.859-3.043-25.332-6.111-55.927a70.883 70.883 0 0 0-8.71-3.017l.269-1.9-22.707-9.973-7.569-3.023h-5.539a43.684 43.684 0 0 1 .075-8.946c2.765-1.3 5.788-2.887 9.25-4.884.931-4.567 1.147-15.561 1.906-24.537 2.487.464 5.635-1.233 6.967-2.4 2.29-2 7.18-10.811.49-14.334a5.725 5.725 0 0 0-4.506-.295 20.07 20.07 0 0 0-.94-8.382c1.711 1.716 5.774 1.716 7.271-.191-5.56-3.813-5.56-10.487-12.19-12.013 2.753.344 5.774-2.564 6.282-5.066-9.811-1.431-20.864-10.465-25.556-14.588a20.051 20.051 0 0 0-4.394-2.958v251.183l.087.055 40.724-26.741 1.025-13.114 13.069.708 6.906.15 6.917-14.273-.043-.185Z" data-name="Path 1352"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@@ -141,18 +141,33 @@ if (!empty($geolocation)){
if (!empty($gloc->geolocation) || $gloc->geolocation != '' || $gloc->geolocation != null ){
$glocation = json_decode($gloc->geolocation) ?? '';
if ($glocation[0] != null){
$add_pos .= 'L.marker({lon: '.$glocation[1].', lat: '.$glocation[0].'}).bindPopup(\''.$gloc->serialnumber.'\').addTo(map);';
$add_pos .= 'L.marker(['.$glocation[0].', '.$glocation[1].'],{icon: TSSemp}).addTo(map);';
}
}
}
$view .= '<div class="content-block">
<div id="map" style="height:300px;">
<div id="map" style="height:300px;z-index: 0;">
</div>
<script>
// initialize Leaflet
var map = L.map(\'map\').setView({lon: 5.1938101, lat: 51.5778742}, 2);
//Add TSS Avatar to MAP
var TSSAvatar = L.icon({
iconUrl: \'./assets/images/tss-persoon.svg\',
iconSize: [35, 55], // size of the icon
});
//Add TSS Avatar to MAP
var TSSemp = L.icon({
iconUrl: \'./assets/images/EP.png\',
iconSize: [50, 50], // size of the icon
});
L.marker([51.5778742,5.1938101], {icon: TSSAvatar}).addTo(map);
// add the OpenStreetMap tiles
L.tileLayer(\'https://tile.openstreetmap.org/{z}/{x}/{y}.png\', {
maxZoom: 19,

View File

@@ -222,12 +222,19 @@ if (!empty($responses->geolocation) || $responses->geolocation != ''){
$geolocation = json_decode($responses->geolocation,true);
$view .= '<div class="content-block">
<div id="map" style="height:300px;">
<div id="map" style="height:300px;z-index: 0;">
</div>
<script>
// initialize Leaflet
var map = L.map(\'map\').setView({lon: '.$geolocation[1].', lat: '.$geolocation[0].'}, 10);
//Add TSS Avatar to MAP
var TSSemp = L.icon({
iconUrl: \'./assets/images/EP.png\',
iconSize: [50, 50], // size of the icon
});
L.marker(['.$geolocation[0].','.$geolocation[1].'], {icon: TSSemp}).addTo(map);
// add the OpenStreetMap tiles
L.tileLayer(\'https://tile.openstreetmap.org/{z}/{x}/{y}.png\', {
maxZoom: 19,
@@ -236,10 +243,6 @@ if (!empty($responses->geolocation) || $responses->geolocation != ''){
// show the scale bar on the lower left corner
L.control.scale({imperial: true, metric: true}).addTo(map);
// show a marker on the map
L.marker({lon: '.$geolocation[1].', lat: '.$geolocation[0].'}).bindPopup(\''.$responses->productname.'\').addTo(map);
</script>
</div>
';