I'm trying to use the vuelayers API in a vue application. I've imported ol itself too, as I couldn't get the ol-ext module to work. When trying to use the proj functions (specifically addProjection()) I get the following error:
Uncaught TypeError: projection.getCode is not a function
main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueLayers from 'vuelayers'
import 'vuelayers/dist/vuelayers.css'
import 'ol'
createApp(App).mount('#app')
ExampleComp.vue
<template>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
<vl-view :projection="projection" :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-layer-image id="xkcd">
<vl-source-image-static :url="imgUrl" :size="imgSize" :extent="imgExtent" :projection="projection"
:attributions="imgCopyright"></vl-source-image-static>
</vl-layer-image>
</vl-map>
</template>
<script>
import { addProjection, createProjection } from 'ol/proj'
let size = [1024, 968]
let extent = [0, 0, ...size]
let customProj = createProjection({
code: 'xkcd-image',
units: 'pixels',
extent,
})
addProjection(customProj)
export default {
data () {
return {
zoom: 2,
maxZoom: 8,
center: [size[0] / 2, size[1] / 2],
rotation: 0,
projection: customProj.getCode(),
imgUrl: 'https://imgs.xkcd.com/comics/online_communities.png',
imgCopyright: '© xkcd',
imgSize: size,
imgExtent: extent,
}
},
}
</script>
I don't have enough experience with this to know if the absence of a getCode() function is an issue with the module of my code.
Related
I'm not able to get Leaflet to load the tiles of my map past the first row in this Vue 3 component. I've tried declaring the vertical size of its div several ways, as well as calling map.invalidateSize() when the component is mounted, but without any success.
<script setup lang="ts">
import { onMounted } from "vue";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
onMounted(() => {
var map = L.map("map", { attributionControl: false }).setView([0, 0], 0);
L.tileLayer("http://127.0.0.1:7800/{z}/{x}/{y}.jpeg", {
maxZoom: 0,
noWrap: true,
}).addTo(map);
});
</script>
<template>
<h1>Map Detail</h1>
<div id="map"></div>
</template>
<style>
#map {
width: 100%;
height: 512px;
}
</style>
Not sure if either or both will work but you can try
Setting the dimensions of #map like this
#map {
width: 100%;
height: calc(512px / 100%); // Set the height relative to the width of the parent element
}
Setting the maxZoom to a higher value like 18 in tile layer, and set the zoom in map to 1
import { onMounted } from "vue";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
onMounted(() => {
var map = L.map("map", {
attributionControl: false,
zoom: 1, // Set the initial zoom level to 1
}).setView([0, 0], 0);
L.tileLayer("http://127.0.0.1:7800/{z}/{x}/{y}.jpeg", {
maxZoom: 18,
noWrap: true,
}).addTo(map);
});
I am trying to get openlayer working in alpine
but i have this error which i can't solve
Uncaught SyntaxError: ambiguous indirect export: default
(import olJf from "./dist/js/oljf.js";)
My source file
//oljf.js
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
export default function olJf () {
new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: [0, 0],
zoom: 2,
}),
})
};
I compile it with vitejs and I import it in my alpine component
//compiled file
import olJf from "./dist/js/oljf.js";
document.addEventListener('alpine:init', () => {
Alpine.data('map', () => ({
latitude: false,
longitude: false,
isLoading: false,
init() {
console.log(`map for ${this.latitude}`);
console.log(window.oljf)
const mapdiv = document.getElementById('openmap_offre')
olJf()
}
})
)
})
And I call alpine
<head>
<script type="module" src="https://xxx.be/wp-content/themes/visittail/assets/js/map.js" defer></script>
</head>
<body>
<div id="openmap_offre" class="mt-3" style="width: 100%; height: 400px;" x-data="map" x-init="initMap">
</div>
</body>
I am using leaflet-webgl-heatmap in my VueJs application. It is giving me the following error:
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_6___default.a.webGLHeatmap is not a constructor
The code is the following:
<div id="heat-map" style="height: 400px"></div>
In the script I am doing the import as:
import L from 'leaflet'
import 'leaflet-webgl-heatmap'
and
const base = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png')
const map = L.map('heat-map', {
layers: [base],
center: this.centerLoc,
zoom: 8
})
const heatmap = new L.webGLHeatmap({ size: 1000 })
heatmap.setData(this.getStopHeatMap);
map.addLayer(heatmap)
Maybe someone faced a similar problem. When such a code is executed, the image added to the map is displayed not in the coordinates specified in the corners, but on the entire screen.
import "leaflet-toolbar";
import "leaflet-distortableimage";
import "leaflet-distortableimage/dist/vendor.js";
import "./styles.css";
import "leaflet/dist/leaflet.css";
import "leaflet-toolbar/dist/leaflet.toolbar.css";
import "leaflet-distortableimage/dist/leaflet.distortableimage.css";
import PlanImage from "../../../../Downloads/Stage_Plans_155_8bd04203-148f-4332-b82a-297afd3be66f.jpeg";
const map = L.map("app", {
center: [50.0, 10.0],
zoom: 3,
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© OpenStreetMap contributors',
}).addTo(map);
map.whenReady(() => {
let img = new L.distortableImageOverlay(PlanImage, {
corners: [L.latLng(51.52, -0.14), L.latLng(51.52, -0.1), L.latLng(51.5, -0.14), L.latLng(51.5, -0.1)],
mode: "lock",
}).addTo(map);
// () => map.removeLayer(imageLayer);
});
An error appears
DistortableImageOverlay.js:317 Uncaught TypeError: Cannot read properties of undefined (reading 'slice')
at NewClass.getAngle (DistortableImageOverlay.js:317:18)
at NewClass._reset (DistortableImageOverlay.js:453:30)
at NewClass.setBounds (ImageOverlay.js:144:9)
at NewClass.setCorners (DistortableImageOverlay.js:247:10)
at NewClass.<anonymous> (index.js:40:7)
at NewClass.whenReady (Map.js:1465:13)
at Object.parcelRequire.src/index.js.leaflet (index.js:20:5)
at newRequire (src.a2b27638.js:47:24)
at src.a2b27638.js:81:7
at src.a2b27638.js:120:3
And after moving the mouse wheel, the image is displayed at the desired coordinates.
How can we embeded leaflet Map into Preact component. I am creating a Map widget using webpack. In the below I show you the code I implemented.
import registerCustomElement from 'preact-custom-element';
import { h , Component } from 'preact';
import {map as createMap, tileLayer} from '../../node_modules/leaflet/dist/leaflet-src.esm.js';
class mapView extends Component {
componentDidMount() {
let map2 = L.map('mapid').setView([51.505, -0.09], 13);
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
const mapEl = this.shadowRoot.querySelector('#mapid');
let map = createMap(mapEl).setView([51.505, -0.09], 13);
}
render (){
return (
<div>
<div id="mapid" style="height: 100%"></div>
</div>
)
}
}
registerCustomElement(mapView, "map-view");
Can we use React Leaflet in Preact? Is it possible to use? or is there any library or package to create Map in Preact?
This is easy. I found a Stack Overflow question related to Leaflet usage in LitElement.
My answer is similar as this, but need to do some changes, because I am creating a web component (widget).
import registerCustomElement from 'preact-custom-element';
import { Component } from 'preact';
import {map as createMap, tileLayer , icon, marker} from '../../node_modules/leaflet/dist/leaflet-src.esm.js';
import markerIcon from '../../node_modules/leaflet/dist/images/marker-icon.png';
import '../../node_modules/leaflet/dist/leaflet.css';
import "../Assets/CSS/file.css";
import 'bootstrap/dist/css/bootstrap.css';
class mapView extends Component {
componentDidMount() {
var locations = [
["LOCATION_1", 11.8166, 122.0942],
["LOCATION_2", 11.9804, 121.9189],
["LOCATION_3", 10.7202, 122.5621],
["LOCATION_4", 11.3889, 122.6277],
["LOCATION_5", 10.5929, 122.6325]
];
map = createMap('mapid').setView([51.505, -0.09], 13);
let urlll = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?';
map.addLayer(tileLayer(
urlll,
{attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
tileSize: 512,
zoomOffset: -1,
})
);
let marketIcon = icon({
iconUrl: markerIcon,
iconRetinaUrl: markerIcon,
iconAnchor: [5, 25],
popupAnchor: [10, -44],
iconSize: [25, 35],
});
for (var i = 0; i < locations.length; i++) {
marker([locations[i][1], locations[i][2]], {
icon: marketIcon,
draggable: true,
}).addTo(map);
}
}
render (){
return (
<div>
<div id="mapid"></div>
</div>
)
}
}
registerCustomElement(mapView, "map-view");
You need to update your webpack.config with the file loader. https://v4.webpack.js.org/loaders/file-loader/
Here is my script file code
<script defer="" src="http://HOST_URL/MapCom.js" type="text/javascript"></script>
<map-view name="map"></map-view>