Comments (1)
Der Code sieht für "keine Ahnung von React" gut aus! Damit Ihr Euch nicht mit React befassen müsst, haben wir die ganze Interaktion in die Layer gesteckt. Diese benötigen kein React.
Die Funktion ReactDOM.render(...)
muss nur ein mal aufgerufen werden. Anschliessend kann z.B. die Funktion routeLayer.loadRoutes(routeData)
beliebig oft mit neuen Daten aufgerufen werden. Die Karte aktualisiert sich dabei von selbst.
Das folgende Code-Beispiel, kann einfach in den Code-Kasten auf https://trafimage-maps.geops.ch/#section-casa kopiert werden. Es initialisiert den RouteLayer
und aktualisiert die Routen ausserhalb von React.
import React from 'react';
import TrafimageMaps from '../../components/TrafimageMaps';
import RouteLayer from '../../layers/RouteLayer';
import ZoneLayer from '../../layers/ZoneLayer';
import { casa } from '../../config/topics';
// Initialize route layer.
const routeLayer = new RouteLayer({
// Demo token. Please replace with your own token.
token: '5cc87b12d7c5370001c1d6551c1d597442444f8f8adc27fefe2f6b93',
});
// Use ReactDOM.render() if React is not available
function renderMap() {
// Render the component with react.
return (
<div style={{ position: 'relative', width: '100%', height: 500 }}>
<TrafimageMaps
topics={[casa]}
token="5cc87b12d7c5370001c1d6551c1d597442444f8f8adc27fefe2f6b93"
layers={[routeLayer]}
zoom={7}
/>
</div>
);
};
// Visualize a route on the map.
routeLayer.loadRoutes([
{
uicFrom: 8500010,
uicTo: 8503000,
mot:'rail',
},
]);
// Update the route
window.setTimeout(() => {
routeLayer.loadRoutes([
{
uicFrom: 8501000,
uicTo: 8500010,
mot:'rail',
},
]);
}, 4000);
// Make the demo working
const CasaExample = renderMap;
<CasaExample />;
from trafimage-maps.
Related Issues (9)
- Zonen (farblich) unterscheiden zwischen "selektiert" und "nicht selektiert". HOT 1
- Route Bern - Zürich HB kann nicht angezeigt werden wegen "Bahn-2000-Strecke" HOT 3
- ZoneLayer: Zone & Partner auslesen beim Click-Callback HOT 1
- Keine Ortsbezeichnung je nach Zoomstufe
- Action Required: Fix Renovate Configuration
- The slider on the zoom in/out bar disappears when map height is small HOT 1
- Language of Maps HOT 1
- Problem with Platforms with local_ref with ";" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from trafimage-maps.