//components/Here.js
export default function Here() {
const [map, setMap] = useState(null)
useEffect(() => {
getMap()
return () => map.dispose();
}, []);
const getMap = () => {
const H = window.H;
//apikey (free here developer javascript key)
const platform = new H.service.Platform({
apikey: "JNIn_O9OQdca51JT5ofoou0WOKdp69bNG-XxHaHqPLo"
});
const defaultLayers = platform.createDefaultLayers();
// Create an instance of the map
const map = new H.Map(
document.getElementById('mapView'),
defaultLayers.vector.normal.map,
{
// This map is centered over Europe
center: { lat: 50, lng: 5 },
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
}
);
setMap(map)
}
return (
// Set a height on the map so it will display
<div id='mapView' style={{ height: '100%' }}>
<button onClick={() => { map.dispose(); getMap() }}
style={{
position: 'fixed', top: '70px', left: '10px', zIndex: 2,
border: '2px solid green'
}}
>refresh</button>
</div>
);
}
------------------------------------
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
-----------------------------------
//tab1.tsx
import {
IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonAlert, IonButton, IonCard, IonCardHeader,
IonCardSubtitle, IonCardTitle, IonCardContent,
IonItem, IonIcon, IonLabel, IonBadge, IonList,
IonItemDivider, IonCheckbox, IonChip, IonAvatar,
IonGrid, IonRow, IonCol, IonInput, IonToggle,
IonModal, IonRefresher, IonRefresherContent,
IonTextarea, IonSelect, IonListHeader,
IonSelectOption, IonButtons, IonBackButton,
IonMenuButton, IonSegment, IonSearchbar,
IonSegmentButton, IonFooter, IonText, IonToast,
useIonViewDidEnter, useIonViewDidLeave,
useIonViewWillEnter, useIonViewWillLeave
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import {
person
} from 'ionicons/icons';
import { Plugins } from '@capacitor/core';
import Here from '../components/Here'
const Tab1: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Here Examples</IonTitle>
</IonToolbar>
</IonHeader>
<Here />
</IonPage>
);
};
export default Tab1;
reference:
https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/get-started.html
Here react
https://developer.here.com/tutorials/react/
Npm start issue -> in cmd type
node node_modules/react-scripts/scripts/start.js
Here developer javascript key
https://developer.here.com/projects
No comments:
Post a Comment