traffic layer
panorama view
drawing manager
traffic layer
import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';
import { compose, withProps } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
TrafficLayer,
} from "react-google-maps";
class Traffic extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const MyMap = compose(
withProps({
googleMapURL: googleUrl.url1,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: 41.9, lng: -87.624 }}
>
<TrafficLayer autoUpdate />
</GoogleMap>
);
return (
<MyMap />
);
}
}
export default Traffic;
street view
import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';
import { compose, withProps} from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
StreetViewPanorama,
OverlayView,
} from "react-google-maps";
import FaAnchor from "react-icons/lib/fa/anchor";
const getPixelPositionOffset = (width, height) => ({
x: -(width / 2),
y: -(height / 2),
})
class StreetView extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const MyMap = compose(
withProps({
googleMapURL: googleUrl.url1,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
center: { lat: 49.2853171, lng: -123.1119202 },
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap defaultZoom={8} defaultCenter={props.center}>
<StreetViewPanorama defaultPosition={props.center} visible>
<OverlayView
position={{ lat: 49.28590291211115, lng: -123.11248166065218 }}
mapPaneName={OverlayView.OVERLAY_LAYER}
getPixelPositionOffset={getPixelPositionOffset}
>
<div style={{ background: `red`, color: `white`, padding: 5, borderRadius: `50%` }}>
OverlayView
</div>
</OverlayView>
</StreetViewPanorama>
</GoogleMap>
);
return (
<MyMap />
);
}
}
export default StreetView;
------------------------------------------
kml layer
import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';
import { compose, withProps } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
KmlLayer,
} from "react-google-maps";
class Kml extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const MyMap = compose(
withProps({
googleMapURL: googleUrl.url1,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
center: { lat: -34.397, lng: 150.644 },
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={9}
defaultCenter={{ lat: 41.9, lng: -87.624 }}
>
<KmlLayer
url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"
options={{ preserveViewport: true }}
/>
</GoogleMap>
);
return (
<MyMap />
);
}
}
export default Kml;
-------------------------------------------
ground overlay
import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';
import { compose, withProps} from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
GroundOverlay,
} from "react-google-maps";
const google = window.google;
class MapWithGroundOverlay extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const MyMap = compose(
withProps({
googleMapURL: googleUrl.url1,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
center: { lat: -34.397, lng: 150.644 },
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: 40.740, lng: -74.18 }}
>
<GroundOverlay
defaultUrl="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
defaultBounds={new google.maps.LatLngBounds(
new google.maps.LatLng(40.712216, -74.22655),
new google.maps.LatLng(40.773941, -74.12544)
)}
defaultOpacity={.5}
/>
</GoogleMap>
);
return (
<MyMap />
);
}
}
export default MapWithGroundOverlay;
----------------------------------------
drawing manager
import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';
import { compose, withProps } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
} from "react-google-maps";
import { DrawingManager } from "react-google-maps/lib/components/drawing/DrawingManager";
const google = window.google;
class MapWithADrawingManager extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const MyMap = compose(
withProps({
googleMapURL: googleUrl.url3,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={8}
defaultCenter={new google.maps.LatLng(-34.397, 150.644)}
>
<DrawingManager
defaultDrawingMode={google.maps.drawing.OverlayType.CIRCLE}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE,
],
},
circleOptions: {
fillColor: `#ffff00`,
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1,
},
}}
/>
</GoogleMap>
);
return (
<MyMap />
);
}
}
export default MapWithADrawingManager;
reference:
No comments:
Post a Comment