mirror of
https://github.com/maputnik/editor.git
synced 2026-01-10 07:20:02 +00:00
ad69cbdb20
Resolves #803 This is an initial commit to allow migrating to typescript bit by bit. It introduces vite. It removes all the webpack configuration (which I have no clue what all the profiling are needed for, and couldn't find anything in the readme). It also changes a single file from javascript to typescript: `urlopen.js` -> `urlopen.ts` Which was done manually, later on I'll see if I can automate most of the migration. For now, everything seems to work as expected. I also upgrades storybook to use vite and renames the stories to jsx (I honestly don't know why this complexity is needed here, but I'll keep it for now). cc: @damianstasik
109 lines
2.1 KiB
JavaScript
109 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import MapOpenLayers from '../src/components/MapOpenLayers';
|
|
|
|
|
|
export default {
|
|
title: 'MapOpenLayers',
|
|
component: MapOpenLayers,
|
|
};
|
|
|
|
const mapStyle = {
|
|
"version": 8,
|
|
"sources": {
|
|
"test1": {
|
|
"type": "geojson",
|
|
"data": {
|
|
"type": "FeatureCollection",
|
|
"features": [
|
|
{
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": [0, -10]
|
|
},
|
|
"properties": {}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"test2": {
|
|
"type": "geojson",
|
|
"data": {
|
|
"type": "FeatureCollection",
|
|
"features": [
|
|
{
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": [15, 10]
|
|
},
|
|
"properties": {}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"test3": {
|
|
"type": "geojson",
|
|
"data": {
|
|
"type": "FeatureCollection",
|
|
"features": [
|
|
{
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": [-15, 10]
|
|
},
|
|
"properties": {}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"sprite": "",
|
|
"glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
|
|
"layers": [
|
|
{
|
|
"id": "test1",
|
|
"type": "circle",
|
|
"source": "test1",
|
|
"paint": {
|
|
"circle-radius": 40,
|
|
"circle-color": "red"
|
|
}
|
|
},
|
|
{
|
|
"id": "test2",
|
|
"type": "circle",
|
|
"source": "test2",
|
|
"paint": {
|
|
"circle-radius": 40,
|
|
"circle-color": "green"
|
|
}
|
|
},
|
|
{
|
|
"id": "test3",
|
|
"type": "circle",
|
|
"source": "test3",
|
|
"paint": {
|
|
"circle-radius": 40,
|
|
"circle-color": "blue"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
export const Basic = () => {
|
|
return <div style={{height: "100vh", width: "100vw", display: "flex"}}>
|
|
<MapOpenLayers
|
|
mapStyle={mapStyle}
|
|
inspectModeEnabled={false}
|
|
replaceAccessTokens={(s) => s}
|
|
onChange={() => {}}
|
|
debugToolbox={true}
|
|
/>
|
|
</div>
|
|
};
|
|
|
|
|
|
|