Térképes megjelenítések

2020. november 8., vasárnap

Térképi forrás állományok és megjelenítésük

A KML (Keyhole Markup Language) egy olyan fájlformátum, amelyet a földrajzi adatok és kapcsolódó tartalmak tárolására, továbbítására szolgál. Ennek becsomagolt(zip-elt) formátuma a KMZ.

Feldolgozó Openlayers script:

var source = new ol.source.Vector({wrapX: false,
url: 'https://mierdekel.hu/terkep/map.kml',
format: new ol.format.KML(),
});
var vector = new ol.layer.Vector({
source: source,
});

https://mierdekel.hu/ol/index_kml.html

WKT

A Well-Known-Text, rövidítve WKT a geoinformatikában objektumok vektoros geometriájának leírására szolgáló szöveges jelölőnyelv, melyet az Open Geospatial Consortium (OGC) dolgozott ki

https://mierdekel.hu/ol/index_wkt.html

JSON

A JSON (JavaScript Object Notation) egy kis méretű, szöveg alapú szabvány adat formátum, ember által is jól olvasható adatcserére. JavaScript nyelven létrehozott objektumokról van szó. Arra használjuk, hogy a JavaScript objektumokat stringgé alakítjuk, és ilyen formában történik az adattovábbítás.

GeoJSON

Olyan JSON formátum, amely speciális jelölök használatával a térképi objektumok leírására szolgál.

Feldolgozó Openlayers script:

var source = new ol.source.Vector({wrapX: false,
url: 'https://mierdekel.hu/terkep/map.geojson',
format: new ol.format.GeoJSON(),
});
var vector = new ol.layer.Vector({
source: source,
});

https://mierdekel.hu/ol/index_geojson.html

https://mierdekel.hu/leaflet/index_geojson.html

TopoJSON

Olyan JSON formátum, amely speciális jelölök használatával a térképi objektumok leírására szolgál.

Feldolgozó Openlayers script:

var source = new ol.source.Vector({wrapX: false,

url: 'https://mierdekel.hu/terkep/map.topojson',
format: new ol.format.TopoJSON(),
});
var vector = new ol.layer.Vector({
source: source,
});

https://mierdekel.hu/ol/index_topojson.html

CSV

Vesszővel szeparált file formátum az adatok átadására

Beágyazott térkép használat (iframe, embed)

Iframe (beágyazott keret)

Eddig a WEB lap teljes egészében térképpel foglalkozott. Most nézzük meg azt, hogy hogyan kell meglévő web lap egy területére térképet beilleszteni a különböző szolgáltatók segítségével.

A beágyazott keret lényegében egy adott méretű elkülönülten kezelt terület, amelyben egy külső weblapot tudunk megjeleníteni. Az iframe méretét az HTML befogadó lapban kell meghatározni.

Az iframe tag paraméterei:

globális attribútumok :Olyan paraméterek (attribútumok), amelyeket minden tag esetén használhatunk: accesskey, class , contenteditable , contextmenu , dir , draggable , dropzone , hidden , id , lang , spellcheck , style , tabindex , title , translate.

src: a megjelenítendő állomány webcíme.

width: a beágyazott keret vízszintes mérete.

height: a beágyazott keret függőleges mérete.

srcdoc: a keretben megjelenő tartalom közvetlen megadása HTML kódokkal.

name: nevet adhatunk a beágyazott keretnek, hogy hivatkozhassunk rá.

sandbox: az iframe-be betöltött dokumentumra vonatkozó megszorításokat ill. engedélyeket lehet megadni benne.

seamless: új logikai típusú attribútum, melynek beállításával elérhetjük, hogy a keret tartalma úgy jelenjen meg, mintha a szülő dokumentum közvetlen része lenne.

allowfullscreen: logikai attribútum, mellyel megadhatjuk, hogy a beágyazott oldal megjelenhet-e teljes képernyőn.

pl.:

</iframe>

EMBED (tartalom beágyazás)

Az embed külső tartalom beágyazására szolgáló tag. Ez általában más (interaktív) alkalmazás (tipikusan nem HTML-állomány). HTML5 szabvány a beágyazásra javsolt használat.

Az embed tag paraméterei

globális attribútumok:Olyan paraméterek (attribútumok), amelyeket minden tag esetén használhatunk: accesskey, class , contenteditable , contextmenu , dir , draggable , dropzone , hidden , id , lang , spellcheck , style , tabindex , title , translate.

src: a beágyazandó tartalom webcíme.

type: a beágyazandó tartalom mime-típusa.

width: a beágyazandó tartalom szélessége.

height: a beágyazandó tartalom magassága

pl..

Objektum beágyazás használattal is működik

OSM minta:

MapQuest minta:

MapTiler minta:

src="https://api.maptiler.com/maps/streets/?key=ptRri5SRXyugsx5Bdomf#14.0/40.70850/-74.00603">

</iframe>

MapBox minta:

src='http://a.tiles.mapbox.com/v3/vince78718.map-6z5j80z7.html#8/47.35710549396971/19.295889684'>

</iframe>

ESRI minta:

scrolling="no" marginheight="0" marginwidth="0"

src="http://arcgis.com/apps/Viewer/index.html?appid=1fa6b89a300c4e9ebf84613dd5c44b9f">

</iframe>

GMAP minta:

src="https://maps.google.com/maps?q=budapest%2C%20k%C3%A9zdiv%C3%A1s%C3%A1rhely%20utca%20&t=&z=13&ie=UTF8&iwloc=&output=embed"

frameborder="0"

scrolling="no"

marginheight="0"

marginwidth="0">

</iframe>

Bing MAP minta:

</iframe>

2020. november 5., csütörtök

OpenLayer API használata

OpenLayer api használata:

A szabály itt is azonos a header részben be kell tölteni az js és css könyvtárakat. A web lap betöltési eseményéhez kötve indítani kell a térkép réteg aktiválását. Induló pozíciót és a nagyítás mértékét meg kell adni. A képernyő pont pozicióját attributumait és esemény kezelőjét be kell állítani.

És már működik is.

Map / Térkép |-> ol.Map

A térkép az OpenLayers egy alapkomponense. Egy térkép megjelenítéséhez egy view, egy vagy több réteg és egy cél konténer szükséges.

View / nézet | -> ol.View

A view határozza meg, hogyan jelenítjük meg a térképet. Arra használjuk, hogy beállítsuk a felbontást, a középpont helyét, stb.

Layers / rétegek |-> ol.layer

Rétegek egymás alá/fölé helyezve adhatók a térképhez. A réteg vagy raszter réteg (képek | ol.layer.Tile ) vagy vektor réteg (pontok/vonalak/felületek | ol.layer.Vector ) lehet.

Source / forrás |-> ol.source

Minden rétegnek van egy forrása, mely tudja hogyan kell a réteg tartalmát betölteni (pl.: ol.source.OSM).
A Vektor rétegek esetén a forrás a *format osztályt használva olvassa be az adatokat (például GeoJSON vagy KML) és mint a térképi elemek (features) halmazát szolgáltatja a réteget.

Features / térképelemek |-> ol.Feature(point)

A térképi elemek a világban megjelenő dolgokat reprezentálnak és különböző geometria*ként (mint pont, vonal vagy felület) jeleníthetjük meg őket, egy adott *stílus használatával, mely a kinézetüket határozza meg (vonalvastagság, kitöltési szín, stb.).

pl:

//--- pont objektumlétrehozása
var point = new ol.geom.Point(
ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857') //--- beállítás
);

);
//--- Features objektum létrehozása
var pointFeature = new ol.Feature(point);

//--- source objektum létrehozása
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326'
});

//--- Vektor forrás tulajdonság összerendelés
vectorSource.addFeatures([pointFeature]);

//--- Vector layer objektum létrehozása

var vectorLayer = new ol.layer.Vector({
source: vectorSource
});

// vektor réteg térkép objektumhoz hozzáadása
map.addLayer(vectorLayer);

Egy OpenLayers térképet egy HTML DOM elemhez kapcsolnunk, ezért létrehoztunk egy <div> elemet, a map azonosítóval (id) |-> <div id="map" class="map" tabindex="0">.

A térképeket az olMap osztály reprezentálja. A DOM elemet, melyben a térképet megjelentjük a target tulajdonság beállításával adjuk meg |-> target: 'map',

A vektor rétegeket az ol.layer.Vector osztály reprezentálja és a vektor formátum olvasására alkalmas forrást kell használnia mint például ol.source.GeoJSON, ol.source.KML vagy ol.source.TopoJSON.

pl:

var vectorLayer = new ol.layer.Vector({ --- vektor objektum létrehozása
source: new ol.source.GeoJSON({ --- source objektum létrehozása és beállítása
url: 'kl_minta.json'
})
});

map.addLayer(vectorLayer); //--- Térképhez a vektor réteg hozzá kapcsolása

A vektor réteg térképi elemeinek stílusát is beállíthatjuk. |-> ol.style.Style

A stílust a megjelenített rajzi objektum tulajdonságai határozza meg, úgy mint : kitöltés, a vonalvastagság, szöveg és kép, ezek mind opcionálisak.

A stílust alkalmazhatjuk akár a teljes rétegre, így ez meghatározza az összes tartalmazott térképi elem stílusát, vagy egyes térképi elemekre.

pl:

var limitsLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'kl_minta.json',
format: new ol.format.TopoJSON(),
projection: 'EPSG:3857'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(135, 75, 42, 0.3)'
})
})
});

Komplex minta:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Openlayer Map</title>

<script src="./ol.js"></script>
<link rel="stylesheet" href="./ol.css" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map" class="map" tabindex="0"></div>
<script>
//var budapest = ol.proj.transform([47.245943, 19.438089], 'EPSG:4326', 'EPSG:3857');
var budapest = new ol.geom.Point([19.438089, 47.245943]).transform('EPSG:4326', 'EPSG:3857').getCoordinates()
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: budapest,
zoom: 13
})
});

</script>
</body>
</html>

Link:

https://mierdekel.hu/ol/

ESRI API használata

ESRI térkép api használata:

Minta:

<!DOCTYPE HTML>

<html>

<head>

<title>ESRI minta</title>

<style>

html, body, #map {

padding:0;

margin:0;

height:100%;

}

#BasemapToggle {

position: absolute;

top: 20px;

right: 20px;

z-index: 50;

}

</style>

var map;

require([

"esri/map",

"esri/dijit/BasemapToggle",

"dojo/domReady!"

], function(

Map, BasemapToggle

) {

map = new Map("map", {

center: [47.4274747,19.2058965],

zoom: 15,

basemap: "topo"

});

var toggle = new BasemapToggle({

map: map,

basemap: "satellite"

}, "BasemapToggle");

toggle.startup();

});

</script>

</head>

<body>

</div>

</body>

</html>

Linkek:

https://mierdekel.hu/esri/

https://mierdekel.hu/esri/layers.html

MapQuest API használata

MapQuest térkép api használata:

Megjegyzés ként itt az api meghívás key (kulcs) értékébe saját kulcsot is meg kell adni.

Ezt fejlesztői adminisztráció után lehet kérni.

Minta:

<html>
<head>
<script src="https://open.mapquestapi.com/sdk/js/v7.2.s/mqa.toolkit.js?key=xxx"></script>
<script type="text/javascript">
MQA.EventUtil.observe(window, 'load', function() {
var options={
elt:document.getElementById('map'),
zoom:10, /*initial zoom level of map*/
latLng:{lat:47.245943, lng:19.438089}, /*center of map in latitude/longitude*/
mtype:'map' /*map type (map)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom', function() {
map.addControl(
new MQA.LargeZoom(),
// Placement of the controls
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(25,25))
);
});

var basic=new MQA.Poi( {lat:47.243943, lng:19.43889} );
map.addShape(basic);

MQA.withModule('shapes', function() {
var line = new MQA.LineOverlay();
line.setShapePoints([47.233041, 19.4318492, 47.247136, 19.474787]);
map.addShape(line);
});
});
</script>
<title>MapQuest</title></head>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<body>
<div id='map'></div>
</body>
</html>

Link:

https://mierdekel.hu/mapquest/

MapBox api használata

MapBox térkép api használata:

Megjegyzés ként itt egy 'mapbox.accessToken' kulcsot is meg kell adni. Ezt fejlesztői adminisztráció után lehet kérni.

Minta :

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MAPBOX</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoia2xham9zdyIsImEiOiJlUk03ZG5vIn0.KNHvwFk6Takda1wWhc6kdA';
var map = L.mapbox.map('map')
.setView([47.245, 19.4380], 10)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'))
.addControl(L.mapbox.geocoderControl('mapbox.places', {
keepOpen: true
}));

var featureLayer = L.mapbox.featureLayer({
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
'from': 'Duke Point',
'to': 'Tsawwassen',
'marker-color': '#548cba',
'marker-size': 'large',
'marker-symbol': 'ferry'
},
geometry: {
type: 'Point',
coordinates: [19.29, 47.16]
}
}]
})
.addTo(map);
featureLayer.eachLayer(function(layer) {
var content = '<h2>A ferry ride!<\/h2>' +
'<p>From: ' + layer.feature.properties.from + '<br \/>' +
'to: ' + layer.feature.properties.to + '<\/p>';
layer.bindPopup(content);
});

</script>
</body>
</html>
</script>
</body>
</html>

Link :

https://mierdekel.hu/mapbox/

https://mierdekel.hu/mapbox/index_draw.html

https://mierdekel.hu/mapbox/index_csv.html

2020. november 4., szerda

Bing api használata

Bing térkép elérése : https://www.bing.com/

Bing térkép api használata:

Megjegyzés ként itt egy 'credentials' kulcsot is meg kell adni. Ezt fejlesztői adminisztráció után lehet kérni.

Minta:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MIE Bing térkép minta 2 </title>

<script type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">

var map = null;
var pinInfobox;
function Init()
{
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "xxxx" //kl DEV/okt
});
var loc = new Microsoft.Maps.Location(47.4274747,19.2058965);
var pin = new Microsoft.Maps.Pushpin(loc);

pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
{title: 'MIE',
description: 'Itt vagyok',
visible: false,
offset: new Microsoft.Maps.Point(0,15)});
///
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
///
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
///
map.entities.push(pin);
map.entities.push(pinInfobox);
///
map.setView({center: loc, zoom: 13});
}
///
function displayInfobox(e)
{
pinInfobox.setOptions({ visible:true });
}
///
function hideInfobox(e)
{
pinInfobox.setOptions({ visible: false });
}
</script>
<style>
html, body, #myMap { height: 100%; margin: 0; }
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body onload="Init();" >
<div id='myMap' s></div>
</body>
</html>

Linkek:

https://mierdekel.hu/bing/

https://mierdekel.hu/bing/index_bm2.html