leaflet map does not centre correct

leaflet map does not centre correct - leaflet

Hopefully somebody can help me to centre correct. I'm not sure were the problem comes from, because it seems that the problem only exist on the PC screen and on my mobile screen it is correct.
After I resize the size of the browser window the markers are centred correct. But how to do that automatic?
The problem is shown since I updated from leaflet 0.7 to 1.0.3
On the map are shown several markers and polylines. At the end I try to fit the markers with:
map.fitBounds(myBounds,{maxZoom:10});
map.invalidateSize();
myBounds are the bounds of the markers.
var myBounds = pline2.getBounds();
To test I made this pline between all added markers:
var marker = L.marker(".$event->getLatLonJSArray().", { icon: myIcon, title: '".$title."'}).addTo(map);
pline2.addLatLng(".$event->getLatLonJSArray().");
The map is not centred to the bounds, but the centre is more north from the markers. If zoomed in to much the markers are even out of the viewbox.
If I do invalidateSize() before fitBounds the picture look as underneath. Also than it's corrected afted I resize the browserwindow.
Who can help me with the correct code for centring the map?
Thanks for reaction!
The complete taken from the browser development tools:
<script>
var MapData = 'Map data © OpenStreetMap contributors';
var Imagenary = ' | Imagery © Mapbox';
var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: MapData,
maxZoom: 18
});
var mapbox = L.tileLayer('//{s}.tiles.mapbox.com/v3/oddityoverseer13.ino7n4nl/{z}/{x}/ {y}.png',
{
attribution: MapData + Imagenary,
maxZoom: 18
});
var map = L.map('osm-map'); //.fitWorld().setZoom(10);
osm.addTo(map);
var baseLayers = {
'Mapbox': mapbox,
'OpenStreetMap': osm
};
L.control.layers(baseLayers).addTo(map);
var pline2 = L.polyline([], {color: "black"});var polyline = L.polyline([], {color: 'red', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.16201,4.50147], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 8 augustus 1650 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">8 augustus 1650</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.16201,4.50147]);
pline2.addLatLng([52.16201,4.50147]);
polyline.addTo(map);
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.1624538,4.5015904], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 28 juni 1669 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">28 juni 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.1624538,4.5015904]);
pline2.addLatLng([52.1624538,4.5015904]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'blue', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'green', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'purple', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'orange', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkred', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'salmon', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'beige', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="beige" fill="beige"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Dochter: Dina Paulusdr Planjer (1661–) | Gedoopt: 6 februari 1661 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Dochter: </span><span class="NAME" dir="auto" translate="no">Dina <span class="SURN">Paulusdr Planjer</span></span> (<span title="6 februari 1661">1661</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">6 februari 1661</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkblue', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkblue" fill="darkblue"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Jacobus Paulusz Planjer (1662–) | Gedoopt: 12 maart 1662 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Jacobus <span class="SURN">Paulusz Planjer</span></span> (<span title="12 maart 1662">1662</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">12 maart 1662</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkgreen', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkgreen" fill="darkgreen"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1664–) | Gedoopt: 23 maart 1664 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span> (<span title="23 maart 1664">1664</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">23 maart 1664</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'cadetblue', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="cadetblue" fill="cadetblue"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1666–) | Gedoopt: 7 februari 1666 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span> (<span title="7 februari 1666">1666</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">7 februari 1666</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkslateblue', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkslateblue" fill="darkslateblue"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Johannes Planjer (1669–) | Gedoopt: 14 april 1669 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Johannes <span class="SURN">Planjer</span></span> (<span title="14 april 1669">1669</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">14 april 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
pline2.addTo(map);var myBounds2 = pline2.getBounds();map.fitBounds(myBounds2,{maxZoom:10});
map.invalidateSize();
</script>

Could not reproduce your issue outside of your framework (Webtrees.net?):
http://playground-leaflet.rhcloud.com/huto/1/edit?html,output
What may happen is that your map container size is adjusted several times before and after your code runs.
The fact that everything works fine when you resize your browser window is indeed a very good indicator that Leaflet could not retrieve the correct map container size, and you were probably right trying to execute map.invalidateSize(). However your map container still changes size before and after that, since changing your map view does not results in expected view.
A blind workaround could be to execute the size invalidation and map view change after some delay, hoping that your framework settles down your map container size in the meantime.
setTimeout(function () {
map.invalidateSize();
map.fitBounds(myBounds2, {
maxZoom: 10
});
}, 500); // Adjust the value (in ms)
Of course the proper resolution would be to make sure if the issue comes indeed from map container size being changed, then how to know once the size reaches its final state, and execute the above code at that moment.
If this does not solve your issue, even when using a long delay (like a few seconds), then the issue might be different.
BTW: your new screenshot shows some sort of tabs at the top. In that case, make sure you run invalidateSize after your tab is revealed, and change again the map view after that.
See: Data-toggle tab does not download Leaflet map

Related

select-string works on get-content but not directly on invoke-webclient content

A part of an automated tool chain needs some input data from a website accessible through a well-documented and working API to fetch data in "CSV" format. The output of the Invoke-WebRequest requires some further selection of the response data, since the response not only contains the desired "CSV" data but also some explanatory lines. Here's the data (exact URL to reproduce below):
Latitude (deg.): 51.654
Longitude (deg.): 6.606
A H_hor A_sun(w) H_sun(w) A_sun(s) H_sun(s)
-180.0 0.8 -180.0 0.0 -180.0 0.0
-172.5 0.8 -165.6 0.0 -172.9 0.0
-165.0 1.1 -152.1 0.0 -165.9 0.0
-157.5 1.1 -140.0 0.0 -158.9 0.0
-150.0 1.1 -129.4 0.0 -152.2 0.0
-142.5 1.5 -120.1 0.0 -145.7 0.0
-135.0 1.5 -112.0 0.0 -139.4 0.0
-127.5 1.5 -104.7 0.0 -133.3 0.0
-120.0 1.5 -98.1 0.0 -127.4 1.6
-112.5 1.5 -91.9 0.0 -121.6 5.4
-105.0 1.5 -86.1 0.0 -116.0 9.5
-97.5 1.5 -80.5 0.0 -110.5 13.8
-90.0 1.5 -74.9 0.0 -105.1 18.2
-82.5 1.5 -69.5 0.0 -99.5 22.7
-75.0 1.5 -64.0 0.0 -93.9 27.3
-67.5 1.1 -58.4 0.0 -88.1 32.0
-60.0 1.1 -52.6 0.0 -81.9 36.6
-52.5 1.1 -46.7 2.0 -75.3 41.2
-45.0 1.1 -40.6 5.2 -68.0 45.6
-37.5 1.1 -34.3 8.0 -59.9 49.8
-30.0 0.0 -27.8 10.4 -50.6 53.6
-22.5 0.4 -21.1 12.3 -40.0 56.9
-15.0 0.4 -14.1 13.7 -27.9 59.5
-7.5 0.4 -7.1 14.6 -14.4 61.2
0.0 0.0 0.0 14.9 0.0 61.8
7.5 0.0 7.1 14.6 14.4 61.2
15.0 0.0 14.1 13.7 27.9 59.5
22.5 0.0 21.1 12.3 40.0 56.9
30.0 0.4 27.8 10.4 50.6 53.6
37.5 0.0 34.3 8.0 59.9 49.8
45.0 0.0 40.6 5.2 68.0 45.6
52.5 0.0 46.7 2.0 75.3 41.2
60.0 0.0 52.6 0.0 81.9 36.6
67.5 0.0 58.4 0.0 88.1 32.0
75.0 0.0 64.0 0.0 93.9 27.3
82.5 0.4 69.5 0.0 99.5 22.7
90.0 0.4 74.9 0.0 105.1 18.2
97.5 0.0 80.5 0.0 110.5 13.8
105.0 0.8 86.1 0.0 116.0 9.5
112.5 0.8 91.9 0.0 121.6 5.4
120.0 0.8 98.1 0.0 127.4 1.6
127.5 0.8 104.7 0.0 133.3 0.0
135.0 0.4 112.0 0.0 139.4 0.0
142.5 0.4 120.1 0.0 145.7 0.0
150.0 0.8 129.4 0.0 152.2 0.0
157.5 0.8 140.0 0.0 158.9 0.0
165.0 0.8 152.1 0.0 165.9 0.0
172.5 0.8 165.6 0.0 172.9 0.0
180.0 0.8 180.0 0.0 180.0 0.0
A: Azimuth (0 = S, 90 = W, -90 = E) (degree)
H_hor: Horizon height (degree)
A_sun(w): Sun azimuth in the winter solstice (Dec 21) (0 = S, 90 = W, -90 = E) (degree)
H_sun(w): Sun height in the winter solstice (Dec 21) (degree)
A_sun(s): Sun azimuth in the summer solstice (June 21) (0 = S, 90 = W, -90 = E) (degree)
H_sun(s): Sun height in the summer solstice (June 21) (degree)
PVGIS (c) European Union, 2001-2021
I'd like to only select the lines matching '^[0-9-]' (positive and negative numbers). Essentially, selecting the following lines:
-180.0 0.8 -180.0 0.0 -180.0 0.0
-172.5 0.8 -165.6 0.0 -172.9 0.0
-165.0 1.1 -152.1 0.0 -165.9 0.0
-157.5 1.1 -140.0 0.0 -158.9 0.0
-150.0 1.1 -129.4 0.0 -152.2 0.0
-142.5 1.5 -120.1 0.0 -145.7 0.0
-135.0 1.5 -112.0 0.0 -139.4 0.0
-127.5 1.5 -104.7 0.0 -133.3 0.0
-120.0 1.5 -98.1 0.0 -127.4 1.6
-112.5 1.5 -91.9 0.0 -121.6 5.4
-105.0 1.5 -86.1 0.0 -116.0 9.5
-97.5 1.5 -80.5 0.0 -110.5 13.8
-90.0 1.5 -74.9 0.0 -105.1 18.2
-82.5 1.5 -69.5 0.0 -99.5 22.7
-75.0 1.5 -64.0 0.0 -93.9 27.3
-67.5 1.1 -58.4 0.0 -88.1 32.0
-60.0 1.1 -52.6 0.0 -81.9 36.6
-52.5 1.1 -46.7 2.0 -75.3 41.2
-45.0 1.1 -40.6 5.2 -68.0 45.6
-37.5 1.1 -34.3 8.0 -59.9 49.8
-30.0 0.0 -27.8 10.4 -50.6 53.6
-22.5 0.4 -21.1 12.3 -40.0 56.9
-15.0 0.4 -14.1 13.7 -27.9 59.5
-7.5 0.4 -7.1 14.6 -14.4 61.2
0.0 0.0 0.0 14.9 0.0 61.8
7.5 0.0 7.1 14.6 14.4 61.2
15.0 0.0 14.1 13.7 27.9 59.5
22.5 0.0 21.1 12.3 40.0 56.9
30.0 0.4 27.8 10.4 50.6 53.6
37.5 0.0 34.3 8.0 59.9 49.8
45.0 0.0 40.6 5.2 68.0 45.6
52.5 0.0 46.7 2.0 75.3 41.2
60.0 0.0 52.6 0.0 81.9 36.6
67.5 0.0 58.4 0.0 88.1 32.0
75.0 0.0 64.0 0.0 93.9 27.3
82.5 0.4 69.5 0.0 99.5 22.7
90.0 0.4 74.9 0.0 105.1 18.2
97.5 0.0 80.5 0.0 110.5 13.8
105.0 0.8 86.1 0.0 116.0 9.5
112.5 0.8 91.9 0.0 121.6 5.4
120.0 0.8 98.1 0.0 127.4 1.6
127.5 0.8 104.7 0.0 133.3 0.0
135.0 0.4 112.0 0.0 139.4 0.0
142.5 0.4 120.1 0.0 145.7 0.0
150.0 0.8 129.4 0.0 152.2 0.0
157.5 0.8 140.0 0.0 158.9 0.0
165.0 0.8 152.1 0.0 165.9 0.0
172.5 0.8 165.6 0.0 172.9 0.0
180.0 0.8 180.0 0.0 180.0 0.0
As an example, let's look at the following session explaining my confusion:
~##❯ $horizonUrl = 'https://re.jrc.ec.europa.eu/api/printhorizon?lat=51.654&lon=6.606&browser=0&outputformat=csv'
~##❯ $response = Invoke-WebRequest -Uri $horizonUrl
~##❯ $respcont = $response.Content
~##❯ $respcontstr = [String[]]$response.Content
~##❯ $respcontobj = [Object[]]$response.Content
~##❯ $respcont | Select-String -Pattern "^[0-9-]" -Raw
~##❯ $respcontstr | Select-String -Pattern "^[0-9-]" -Raw
~##❯ $respcontobj | Select-String -Pattern "^[0-9-]" -Raw
~##❯ $respcont.GetType().Name + " " + $respcont.GetType().BaseType
String System.Object
~##❯ $respcontstr.GetType().Name + " " + $respcontstr.GetType().BaseType
String[] array
~##❯ $respcontobj.GetType().Name + " " + $respcontobj.GetType().BaseType
Object[] array
---> No output on the Select-String for the variants above <---
~##❯ Invoke-WebRequest -Uri $horizonUrl -OutFile .\horizon.csv
~##❯ $gc = (Get-Content .\horizon.csv)
~##❯ $gc.GetType().Name + " " + $gc.GetType().BaseType
Object[] array
~##❯ $gc | Select-String -Pattern "^[0-9-]" -Raw
-180.0 0.8 -180.0 0.0 -180.0 0.0
-172.5 0.8 -165.6 0.0 -172.9 0.0
-165.0 1.1 -152.1 0.0 -165.9 0.0
-157.5 1.1 -140.0 0.0 -158.9 0.0
-150.0 1.1 -129.4 0.0 -152.2 0.0
-142.5 1.5 -120.1 0.0 -145.7 0.0
-135.0 1.5 -112.0 0.0 -139.4 0.0
-127.5 1.5 -104.7 0.0 -133.3 0.0
[...]
---> Piped through Get-Content, Select-String dumps the desired output <---
How come Select-String works well together with an intermediate file in piped command chain, however not when used directly, without storing the response content of the Invoke-WebRequest?
The explicit type conversion above was my meager attempt at mimicking the data structure of the output of Get-Content. All the outputs before the pipe look identical in the console (lines of strings).
What did I miss?

The Content property on the response object you get from Invoke-WebRequest is a single multi-line string. Get-Content on the other hand returns multiple single-line strings.
You can use the -split operator to split on newlines:
$respcont -split '\r?\n' |Select -Skip 4 |Select -SkipLast 9

Add image to blank svg image in leaflet with divIcon

I am trying to create a divIcon to use with leaflet maps. I can create a marker with a blank circle using an SVG image code, but I would like to add an image inside the circle. Is this possible? I have tried background images etc but nothing works.
The code is
var iconSettings = {
mapIconUrl: '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 178"><path fill="{mapIconColor}" stroke="#FFF" stroke-width="6" stroke-miterlimit="10" d="M126 23l-6-6A69 69 0 0 0 74 1a69 69 0 0 0-51 22A70 70 0 0 0 1 74c0 21 7 38 22 52l43 47c6 6 11 6 16 0l48-51c12-13 18-29 18-48 0-20-8-37-22-51z"/><circle fill="{mapIconColorInnerCircle}" cx="74" cy="75" r="61"/><circle fill="#FFF" cx="74" cy="75" r="{pinInnerCircleRadius}"/></svg>',
mapIconColor: '#cc756b',
mapIconColorInnerCircle: '#fff',
pinInnerCircleRadius:48
};
// icon normal state
var divIcon = L.divIcon({
className: "leaflet-data-marker",
html: L.Util.template(iconSettings.mapIconUrl, iconSettings), //.replace('#','%23'),
iconAnchor : [12, 32],
iconSize : [50, 60],
popupAnchor : [0, -28]
});

How to get Hocr output using python-tesseract

I had been getting really good results using pytesseract but it is not able to preserve double spaces and they are really important for me.
And, so i decided to retrieve hocr output rather than pure text.But;there doesn't appear to be any way of specifying config file using pytessearct.
So, is it possible to specify cofiguration file using pytesseract or is there some default config file that i can change to get hocr output?
#run method from pytessearct.py
def run_tesseract(input_filename, output_filename_base, lang=None, boxes=False, config=None):
'''
runs the command:
`tesseract_cmd` `input_filename` `output_filename_base`
returns the exit status of tesseract, as well as tesseract's stderr output
'''
command = [tesseract_cmd, input_filename, output_filename_base]
if lang is not None:
command += ['-l', lang]
if boxes:
command += ['batch.nochop', 'makebox']
if config:
command += shlex.split(config)
#command+=['C:\\Program Files (x86)\\Tesseract-OCR\\tessdata\\configs\\hocr']
#print "command:",command
proc = subprocess.Popen(command,
stderr=subprocess.PIPE)
return (proc.wait(), proc.stderr.read())

You can use this another library to use Tesseract in Python: pyslibtesseract
Image:
Code:
import pyslibtesseract
tesseract_config = pyslibtesseract.TesseractConfig(psm=pyslibtesseract.PageSegMode.PSM_SINGLE_LINE, hocr=True)
print(pyslibtesseract.LibTesseract.simple_read(tesseract_config, 'phrase0.png'))
Output:
<div class='ocr_page' id='page_1' title='image ""; bbox 0 0 319 33; ppageno 0'>
<div class='ocr_carea' id='block_1_1' title="bbox 0 0 319 33">
<p class='ocr_par' dir='ltr' id='par_1_1' title="bbox 10 13 276 25">
<span class='ocr_line' id='line_1_1' title="bbox 10 13 276 25; baseline 0 0"><span class='ocrx_word' id='word_1_1' title='bbox 10 14 41 25; x_wconf 75' lang='eng' dir='ltr'><strong>the</strong></span> <span class='ocrx_word' id='word_1_2' title='bbox 53 13 97 25; x_wconf 84' lang='eng' dir='ltr'><strong>book</strong></span> <span class='ocrx_word' id='word_1_3' title='bbox 111 13 129 25; x_wconf 79' lang='eng' dir='ltr'><strong>is</strong></span> <span class='ocrx_word' id='word_1_4' title='bbox 143 17 164 25; x_wconf 83' lang='eng' dir='ltr'>on</span> <span class='ocrx_word' id='word_1_5' title='bbox 178 14 209 25; x_wconf 75' lang='eng' dir='ltr'><strong>the</strong></span> <span class='ocrx_word' id='word_1_6' title='bbox 223 14 276 25; x_wconf 76' lang='eng' dir='ltr'><strong>table</strong></span>
</span>
</p>
</div>
</div>

This worked for me :)
from pytesseract import pytesseract
pytesseract.run_tesseract('image.png', 'output', lang=None, boxes=False, config="hocr")
where : image.png is the image file besides this python file. The output file named output.hocr will be generated next to these files. Open this file in text editor to see the hocr output.

Just add hocr at the end of your command like this
tesseract input_filename output_filename_base hocr
Output file will be a html file

I've edited krozaine's answer:
import pytesseract
pytesseract.run_and_get_output('image.jpg', 'hocr', lang=None, config="hocr")

How to plot 2D Voronoi grid on 3D axes, within bounds?

I have a straightforward function to plot a Voronoi diagram, which works nice when plotting on 2D axes. However, when I plot the 2D grid on a plane on 3D axes, it overflows.
Here is the code:
function plotHexGrid(X, Y, m, n)
f1 = figure
[XV YV] = voronoi(X(:),Y(:));
plot(XV,YV,'b-');
axis([1 m 1 n])
f2 = figure
Z = ones(size(XV));
plot3(XV,YV,Z,'b-');
axis([1 m 1 n 0 10])
saveas(f1,'hexgrid2D.jpg');
saveas(f2,'hexgrid3D.jpg');
end
So I would like to have the grid shown only within the axes boundaries and hide the overflow. I have not been able to find any solutions using Google, so I only tried the following, however without success:
xlim([1, n]);
ylim([1, m]);
UPDATE:
I have the following values for X, Y, m and n:
X = [0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487;
0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487;
0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487;
0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487;
0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487;
0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487;
0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487;
0 3.4641 6.9282 10.3923 13.8564 17.3205 20.7846 24.2487];
Y = [0 2 0 2 0 2 0 2;
4 6 4 6 4 6 4 6;
8 10 8 10 8 10 8 10;
12 14 12 14 12 14 12 14;
16 18 16 18 16 18 16 18;
20 22 20 22 20 22 20 22;
24 26 24 26 24 26 24 26;
28 30 28 30 28 30 28 30];
m = 20;
n = 20;

The provided code works fine on a Mac R2014b, even without the xlim and ylim bits. You may want to try it on a different system/version than yours. Seems like some kind of a graphical bug... Alternatively, you can report it to TheMathWorks.
You may also want to rotate the 2-D figure in order to have a 3-D version of the diagram (using rotate or with a mouse).

MATLAB : reading data file "HAVING TITLE"

I want to read data file that includes titles and want to fit regression models to describe relationship between the variables X and Y.
The data file, data.txt, has two columns named X and Y and the data are
X=[32.0 48.5 36.3 42.9 36.5 32.6 34.0 38.4 27.1 27.6 48.4 43.5 38.5 23.7 34.3 28.7 24.1 38.5 44.6 42.7 47.6 20.6 25.8 37.3 30.3 28.8 28.6 23.9 41.2 21.9 45.2]
Y=[45.8 75.8 52.8 70.1 56.4 51.1 48.6 55.8 45.9 45.3 69.9 63.9 60.8 37.1 52.9 47.1 42.3 56.3 70.0 70.8 71.5 30.1 41.1 57.8 48.0 46.4 46.9 38.0 68.3 32.0 68.0]
I tried to read this by the following commands :
fid = fopen('data.txt','r');
dt = fread(fid);
fclose(fid);
dt
but i am not understanding the result it showing.
EDIT:
The structure of the data file is like the following :
X Y
32 45.8
48.5 75.8
36.3 52.8
42.9 70.1
36.5 56.4

if your data file is like:
32.0, 45.8
48.5, 75.8
...
then you can read it as follows:
data = load('file_name.txt');
x = data(:, 1); y = data(:, 2);

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse

leaflet map does not centre correct - leaflet

Related

select-string works on get-content but not directly on invoke-webclient content

Add image to blank svg image in leaflet with divIcon

How to get Hocr output using python-tesseract

How to plot 2D Voronoi grid on 3D axes, within bounds?

MATLAB : reading data file "HAVING TITLE"

Categories

Resources