Archive

Posts Tagged ‘Maps’

HowTo: round a number up to N decimal digits in Javascript

Was just trying to round-off some Google Maps coordinates for display in Javascript up to 3 decimal digits and that was a bit like a blast from the past (the end of the ‘90s to be more accurate)…

So here’s my contributed answer at:
https://stackoverflow.com/questions/2221167/javascript-formatting-a-rounded-number-to-n-decimals

This works for rounding to N digits (if you just want to truncate to N digits remove the Math.round call and use the Math.trunc one):

function roundN(value, digits) {
   var tenToN = 10 ** digits;
   return /*Math.trunc*/(Math.round(value * tenToN)) / tenToN;
}

Had to resort to such logic at Java in the past when I was authoring data manipulation E-Slate components. That is since I had found out that adding 0.1 many times to 0 you’d end up with some unexpectedly long decimal part (this is due to floating point arithmetics).

A user comment at Format number to always show 2 decimal places calls this technique scaling.

Some mention there are cases that don’t round as expected and at http://www.jacklmoore.com/notes/rounding-in-javascript/ this is suggested instead:

function round(value, decimals) {
  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}

image

HowTo: remove Javascript imports from OpenLayers map examples

OpenLayers is a fine alternative to the map visualization part of Google Maps Platform, however many of its examples sometimes use features from future and server-side Javascript versions, like “imports”.

Based on lou’s answer at https://stackoverflow.com/questions/51093964/why-examples-dont-work-a-struggle-with-imports/56549364, here’s a fix I just did to make the Marker animation example work when you just copy-paste the example code in an .html file without any pre-processing:

<head>
<meta charset="UTF-8">
<title>Marker Animation</title>
<link rel="stylesheet" href=https://openlayers.org/en/v5.3.0/css/ol.css 
type="text/css"> <!-- The line below is only needed for old environments like
Internet Explorer and Android 4.x --> src="https://cdn.polyfill.io/v2/polyfill.min.js?
features=requestAnimationFrame,Element.prototype.classList,URL">
MAKE THE ABOVE A SINGLE ROW
http://br

MAKE THE ABOVE A SINGLE ROW
</head> <body>
<label for="speed"> speed:&nbsp; <input id="speed" type="range" min="10" max="999" step="10" value="60"> </label> <button id="start-animation">Start Animation</button> <script> var Feature = ol.Feature; //import Feature from 'ol/Feature.js';
var Map = ol.Map; //import Map from 'ol/Map.js';
var View = ol.View; //import View from 'ol/View.js';
var Polyline = ol.format.Polyline;
//import Polyline from 'ol/format/Polyline.js';
var Point = ol.geom.Point; //import Point from 'ol/geom/Point.js';
var {Tile, Vector} = ol.layer;
//import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'; var TileLayer = Tile; var VectorLayer = Vector;
//var BingMaps = ol.source.BingMaps;
//import BingMaps from 'ol/source/BingMaps.js';
var VectorSource = ol.source.Vector;
//import VectorSource from 'ol/source/Vector.js';
var {Circle, Fill, Icon, Stroke, Style} = ol.style;
//import {Circle as CircleStyle, Fill, Icon, Stroke, Style}
// from 'ol/style.js'; var CircleStyle = Circle; // This long string is placed here due to jsFiddle limitations. // It is usually loaded with AJAX. var polyline = [ ...

and to use an ESRI sattelite map or OpenStreetMap (plain) map instead of Bing Maps one (which requires a key), do this extra edit to the Marker animation example:

  var map = new Map({
    target: document.getElementById('map'),
    loadTilesWhileAnimating: true,
    view: new View({
      center: center,
      zoom: 10,
      minZoom: 2,
      maxZoom: 19
    }),
    layers: [
      new TileLayer({
        source:
            //new ol.source.OSM()

            new ol.source.XYZ({
              attributions: ['Powered by Esri',
                             'Source: Esri, DigitalGlobe, GeoEye, \
Earthstar Geographics, CNES/Airbus DS, USDA,\
USGS, AeroGRID, IGN, and the GIS User Community'], attributionsCollapsible: false,
url:
'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/
MapServer/tile/{z}/{y}/{x}',

MAKE THE ABOVE A SINGLE ROW
maxZoom: 23 }) /* new BingMaps({ imagerySet: 'AerialWithLabels', key: 'Bing Maps Key from http://www.bingmapsportal.com/ here' }) */ }), vectorLayer ] });

Here’s the modified result:

image

OpenStreetMaps as an alternative to Google Maps in Joomla!

If you use Joomla! (CMS / Content Management System), you could switch to the free OpenStreetMaps instead of the recently-turned-much-more-expensive Google Maps, thanks to the OSModul extension for Joomla!:

https://extensions.joomla.org/profile/extension/maps-a-weather/maps-a-locations/osmodul/

At the bottom of this page there is an example that uses a pin icon similar to how a location would appear in Google Maps. And here is an example with multiple pins (shown as ships).

A shortcoming in comparison to Google Maps is that OpenStreetMaps doesn’t show by itself many Points of Interest (POI) on the map for one to get oriented easier. For example the maps for the location at (38.29399, 21.78592) shows up a little bare: https://www.openstreetmap.org/query?lat=38.29399&lon=21.78592 compared to the same location shown on Google Maps: https://www.google.com/maps/place/38°17’38.4"N+21°47’09.3"E/@38.29399,21.78592

So it is best to add some such characteristic locations apart from one’s location pin, as shown at: https://gitlab.com/schlumpf/osmodul/wikis/Additional%20Markers%20Pins

More information on the OSModul extension for Joomla! can be found at:

https://gitlab.com/schlumpf/osmodul

https://gitlab.com/schlumpf/osmodul/wikis/How%20to%20use

Fix: Windows Phone update error 80072f8f

I was setting up a new Lumia phone (with Windows Phone 8.1) and neither phone update, nor the (Here) maps downloads were working. When trying Settings / Phone Update, it was showing error 80072f8f and was pointing to http://www.windowsphone.com/en-us/how-to/wp8/basics/solutions-to-update-issues to read more info. However that error code wasn’t listed there. Wonder if there is any page listing all the possible error codes. I find it silly if they have error codes that aren’t documented anywhere officially.

I looked it up on Google (sorry Bing!) and found http://www.techanges.com/fix-windows-phone-error-80072f8f/, which was saying this was related to time/date discrepancy between the phone and the windows update server. Obviously the maps also get their updates via the same system, although the maps update was showing the misleading message that it couldn’t connect to the maps library at that moment.

Although I had set correct timezone, it had wrong date/time, it was set to autoupdate date/time, but forgot that it had no SIM card in it yet. Obviously it doesn’t get these updates from a time server, but from the mobile phone connection provider. Hope Windows 10 phone fixes that and gets the date/time from time server like the one from NIST or from Microsoft that Windows uses on the desktop.

Bug: Google Maps rendering exotic place names onto Patras, Greece

GoogleMapsRioArabia

Seems that day (8 Aug 2010), Google Maps system had been drinking or something, else I can’t explain how “Cara Oasis” and other exotic place names (in Arabic script?) were rendered onto a map for the outskirts of Patras, Greece.

Categories: Posts Tags: , , , ,
%d bloggers like this: