I am currently getting my feet whet by using rollup.js beyond the simple "helloworld" case. I have created a rollup project where I am using a combination of babel, eslint and leaflet. My rollup.config.js is given below:
// plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default{
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
sourcemap: 'inline',
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
eslint({
exclude: [
'src/styles/**',
]
}),
babel({exclude:'node_modules/**', })
]
};
Next my main.js is given by:
import L from 'leaflet';
var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
}).addTo(map);
And my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style>
#map {
width:600px;
height:400px;
}
</style>
<link href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
<title>Learning Rollup</title>
</head>
<body>
<div id="map">
</div>
<!-- This is the bundle generated by rollup.js -->
<script src="js/main.min.js"></script>
</body>
</html>
When I execute rollup -c, I end up with a huge 1.4MB+ main.js.min file...If I remove sourcemap: 'inline' from my rollup.config.js, the size of the file drops to 390 kb. For what reason is the sourcemap exploding the size of the generated file? Isn't treeshacking supposed to further reduce the generated file?
The sourcemap will almost always be bigger than the code it's mapping. For that reason, sourcemap: 'inline' is not recommended — do sourcemap: true instead and it'll be written to an adjacent .map file, which will only be downloaded if someone has their devtools open with sourcemaps enabled.
This is unrelated to treeshaking.
Related
I'm just trying to do a simple map using the Leaflet.js libraries directly instead of the python wrappers(ipyleaflet, folium) but I can't any map to display regardless of what I do. the map area is drawn the correct size with the zoom controls, as are the tile attributions, and a marker in the right location. I have tried multiple browsers and also in QWebEngineView as well as different tile sets. I've also tried both the hosted js and css scripts as well as local copies The results are the same. Everything with the same v1.7.1 release though.
Here is the html code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
-->
<style>
#map {
width: 900px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var layer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
});
var mymap = L.map('map', { preferCanvas: true, center: [43.08695, -73.75792], layers: [layer], zoom: 10 });
var mymarker = L.marker([43.08695, -73.75792], { draggable: true }).addTo(mymap)
</script>
</body>
</html
Here's a screenshot
Anybody got any ideas? This ought to be something really simple...
Can I use Open Route Service api in leaflet map? I can't find working example to show how to integrate api key on the map. Now I'm using graphhopper and it's working flawless but now it have restrictions to use up to 5 points.
When I try to make waypoints via open route service I'm showing this error: Uncaught TypeError: L.Routing.openrouteservice is not a constructor
My code:
var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors and ORS'
}).addTo(this.mymap);
var control = L.Routing.control({
waypoints: [
L.latLng(3.102739, 101.598077),
L.latLng(3.101861, 101.599037)
],
router: new L.Routing.openrouteservice('5b3ce3597851110001cf6248e3cd48b3c44c4e529f8fac67408d4257')
// routeWhileDragging: true
}).addTo(this.mymap);
I don't know does openrouteservice works with leaflet routing machine but I tried with MapBox and everything works fine. So now my map support walking directions.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</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' />
<!-- Leaflet Map -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.js"></script>
<!-- end Leaflet map -->
<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.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var mapboxTiles = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
attribution: '© Mapbox © OpenStreetMap',
tileSize: 512,
zoomOffset: -1
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([42.3610, -71.0587], 15);
L.Routing.control({
router: L.Routing.mapbox(L.mapbox.accessToken,{
profile : 'mapbox/walking',
language: 'en',
}),
waypoints: [
L.latLng(40.779625, -73.969111),
L.latLng(40.767949, -73.971855)
],
}).addTo(map);
</script>
</body>
</html>
This is my HTML snippet for including the stuff I need for maps and routing:
<script src="scripts/maps/leaflet.js"></script> <!-- Include Leaflet JS -->
<script src="scripts/maps/leaflet-routing-machine.js"></script> <!-- Include the Leaflet Routing Machine -->
<script src="scripts/maps/polyline.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/lodash.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/corslite.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/L.Routing.OpenRouteService.js"></script> <!-- Include the Open Route Service for Leaflet Routing Machine -->
<script src="scripts/maps/leaflet-providers.js"></script>
Then in typescript:
let router = (L as any).Routing.control({
router: new (L as any).Routing.openrouteservice(orsKey),
waypoints: [
L.latLng(startLatitude, startLongitude),
L.latLng(endLatitude, endLongitude)
],
routeWhileDragging: false,
show: false,
fitSelectedRoutes: false,
createMarker: function (i, waypoint, n) {
return null;
},
lineOptions: {
styles: [{ color: '#9f150b', opacity: 1, weight: 4 }]
}
});
router.addTo(map);
Only problem is the Open route service use POST requests in the latest API. So the L.Routing.OpenRouteService.js file needs updating
I have published a shapefile "ind_adm2" in geoserver as Postgis(postgres database), It can be accessed as webpage using OpenLayers code given below. Now I need to edit the shapefile on webpage itself and save the edited(updated) things in Postgres database. Can anyone help !!
I tried using wfs URL of geoserver but unable to select the feature.
<html>
<head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
basemap = new OpenLayers.Layer.WMS( "Layer Name1",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
utility = new OpenLayers.Layer.WMS( "Layer Name2",
"http://localhost:8080/geoserver/iirs/ows?", {layers: 'iirs:ind_adm2',
transparent:"true"}, {isBaseLayer:false} );
map.addLayers([basemap,utility]);
map.zoomToMaxExtent();
</script>
</body>
</html>
Its expected to select any polygon then edit there itself and update the edits in postgres database.
As what you need will be much more complex than your existing code you should update that to the latest version of OpenLayers (currently 5.3.0) and develop with that. It is easier to get started using the full build https://openlayers.org/en/latest/doc/quickstart.html which is very similar to using versions 3 and 4 so you will be able to reuse examples from those versions. For help about editing WFS here's one question with links a tutorial and some examples Javascript editing WFS from GeoServer using OpenLayers
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/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 -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var basemap = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: "http://vmap0.tiles.osgeo.org/wms/vmap0",
params: {
'LAYERS': 'basic'
},
projection: 'EPSG:4326',
ratio: 1
})
});
var utility = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: "http://localhost:8080/geoserver/iirs/ows",
params: {
'LAYERS': 'iirs:ind_adm2',
'TRANSPARENT': 'true'
},
projection: 'EPSG:4326'
})
});
var map = new ol.Map({
target: 'map',
layers: [basemap], utility],
view: new ol.View({
projection: 'EPSG:4326'
})
});
map.getView().fit(map.getView().getProjection().getExtent());
</script>
</body>
</html>
I am trying to load data from Geoserver into my website using Leaflet but I get an error "Uncaught SyntaxError: Unexpected token :" with my Url link to my GeoJSON link.
I'm confused about proxy and CORS but I expect this could be the answer but I am hoping for an easier solution. If anyone is able to help me to solve this problem I will be very grateful.
This is the code I am trying to run.
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="markers" type="images/marker-icon" href="images/marker-icon.png" />
<script src="js/leaflet.js"></script>
<script src="js/esri-leaflet.js"></script>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/jquery-1.5.min.js'></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1
}).fitBounds([[51.0269253989,-1.34762355597],[51.1990603009,-0.951310026203]]);
L.esri.basemapLayer('Imagery').addTo(mymap);
//loads the geojson layer
var geojsonLayer = new L.GeoJSON();
function loadGeoJson(data) {
geojson.addGeoJSON(data);
}
var geoJsonUrl = "http://localhost:8080/geoserver/RSAC/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=RSAC:results_clipped_with_growth_small&maxFeatures=50&outputFormat=application%2Fjson";
$.ajax({
type: "GET",
url: geoJsonUrl + '&callback=?',
dataType: 'json',
jsonpCallback: 'loadGeoJson',
success: loadGeoJson,
});
</script>
</body>
</html>
One problem is here:
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/jquery-1.5.min.js'></script>
You included jQuery twice, version 1.5 (very old and outdated) after 1.11.0. Simply remove the second jQuery.
In your Javascript jQuery fetches data in JSONP format. However, the Geoserver URL with outputFormat=application/json will send JSON (not JSONP).
To disable the jQuery's JSONP checks you'll have to provide the parameter jsonp: false here:
Cross-domain "json" requests are converted to "jsonp" unless the request includes jsonp: false in its request options. (source)
$.ajax({
type: "GET",
url: geoJsonUrl,
dataType: 'json',
success: loadGeoJson,
jsonp: false
});
I tested this with a random public Geoserver instance and had no issues with CORS, but your mileage may vary.
I am implementing ag-Grid with angular2 in visual studio2015
and I want to implement the example from https://github.com/helix46/ag-grid-angular2-beta-ts
import {Component} from 'angular2/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';
#Component({
selector: 'agGrid',
templateUrl: "/partial/agGrid",
directives: [AgGridNg2]
})
export class agGridComponent {
constructor() {
console.log("agGrid Component Start");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
<environment names="Development">
<!-- Css -->
<link rel="stylesheet" asp-href-include="~/css/*.css">
<!-- Js -->
<script src="~/js/jquery.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/system.js"></script>
<script src="~/js/rx.js"></script>
<script src="~/js/typescript.js"></script>
<script src="~/js/angular2/angular2.dev.js"></script>
<script src="~/js/angular2/angular2-polyfills.js"></script>
<script src="~/js/angular2/http.dev.js"></script>
<script src="~/js/angular2/router.dev.js"></script>
<!--ag-grid-->
<script src="node_modules/ag-grid/dist/ag-grid.js"></script>
</environment>
<environment names="Production">
<!-- Css -->
<link rel="stylesheet" asp-href-include="~/css/*.min.css" asp-append-version="true">
<!-- Js -->
<script src="~/js/jquery.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/system.min.js"></script>
<script src="~/js/rx.min.js"></script>
<script src="~/js/typescript.min.js"></script>
<script src="~/js/angular2/angular2.dev.min.js"></script>
<script src="~/js/angular2/angular2-polyfills.min.js"></script>
<script src="~/js/angular2/http.dev.min.js"></script>
<script src="~/js/angular2/router.dev.min.js"></script>
<!--ag-grid-->
<script src="~/js/ag-grid.js"></script>
</environment>
<!-- Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'ag-grid-ng2': {
defaultExtension: "js"
},
'ag-grid': {
defaultExtension: "js"
},
'ag-grid-enterprise': {
defaultExtension: "js"
}
},
map: {
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
'ag-grid-enterprise': 'node_modules/ag-grid-enterprise',
'ag-grid': 'node_modules/ag-grid'
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<base href="/" />
<body>
<div>
#RenderBody()
</div>
</body>
</html>
but unable to load Failed to load resource: the server responded with a status of 404 (Not Found) ag-grid-ng2/main.js
which is inside node_module and I am giving the correct path, but it is still showing, unable to load resource. Here is a snap of the error.
ag-grid error message
Please help me to resolve this.
Thanking you
You are missing:
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
i.e.
var map = {
'ag-grid': 'node_modules/ag-grid',
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
};